vex-page

vex-page

vue3 管理后台通用列表页面。Vue3 + Element Plus

安装

npm install vex-page

使用

import VexPage from 'vex-page' //导入
// 项目按需引用element-plus, 则需要改为
// import VexPage from 'vex-page/es/index.mjs' 或 import VexPage from 'vex-page/lib/index.js'
// import 'vex-page/es/style.css' 或 import 'vex-page/lib/style.css'

// 设置配置文件
app.use(VexPage, {
  config: {
    pageSizeKey: 'pageSize',
    pageNumKey: 'pageNum',
    getList: res => res.data,
  }
})

<template>
  <v-page
    :columns="columns"
    :btns="btns"
    :filter="filters"
    :get-list="getList"
    @test="test"
  />
</template>

<script setup>
import avatar from './avatar.js'

// 获取列表
const getList = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: [
          {
            id: 1,
            avatar,
            name: '张三',
            age: 18,
            gender: 0,
            select: 0,
            number: 5000,
            table: [
              {
                id: 1,
                name: '张三',
                age: 18,
                gender: 0,
                select: 0,
                number: 5000,
              }
            ]
          },
          {
            id: 2,
            avatar,
            name: '李四',
            age: 19,
            gender: 1,
            select: 0,
            number: 25000,
            table: [
              {
                id: 2,
                name: '李四',
                age: 19,
                gender: 1,
                select: 0,
                number: 25000,
              }
            ]
          },
        ],
        total: 3,
      })
    }, 1000)
  })
}

const gender = [
  { label: '男', value: 0, type: 'primary' },
  { label: '女', value: 1, type: 'success' },
]

const select = [
  { label: '0', value: 0, type: 'primary' },
  { label: '1', value: 1, type: 'success' },
]

const change = (row, value) => {
  console.log(row, value)
}

// 表格配置
const columns = [
  { label: '姓名', prop: 'name', },
  { label: '头像', prop: 'avatar', scope: 'img', width: 100 },
  { label: 'number', prop: 'number', scope: 'number-col' },
  { label: 'input', prop: 'age', scope: 'input', change },
  { label: 'select', prop: 'select', scope: 'select', options: select },
  { label: '性别', prop: 'gender', scope: 'tag', options: gender },

  // { label: '嵌套', prop: 'table', scope: 'table',
  //   options: [
  //     { label: '姓名', prop: 'name', },
  //     { label: 'number', prop: 'number', scope: 'number-col' },
  //     { label: 'input', prop: 'age', scope: 'input', change },
  //     { label: 'select', prop: 'select', scope: 'select', options: select },
  //     { label: '性别', prop: 'gender', scope: 'tag', options: gender },
  //   ]
  // },

  // 操作列
  {
    label: '操作',
    fixed: 'right',
    width: 200,
    scope: 'btn',
    options: [
      { text: 'test', event: 'test' }
    ]
  },
]

const test = (row) => {
  console.log(row)
}

const showAdd = () => {
}

const filters = [
  { label: '姓名', prop: 'name', type: 'input' },
  { label: '性别', prop: 'gender', type: 'select', options: gender },
]

// 按钮
const btns = [
  {
    text: '新增',
    click: showAdd
  },
]
</script>

效果

setConfig

设置全局配置, 主要是分页时候参数以及获取方法

组件

• V-Page
• V-Table
• V-Element
• V-Filter

table 支持scope类型

• img 图片
• number-col 数字
• input 输入框
• select 下拉框
• tag 标签
• table 表格
• btn 按钮