1.1.24 • Published 1 month ago
vex-page v1.1.24
vex-page
vue3 管理后台通用列表页面。Vue3 + Element Plus
安装
npm install vex-page
使用
import VexPage, { setConfig } 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'
// 设置配置文件
setConfig({
pageSizeKey: 'pageSize',
pageNumKey: 'pageNum',
getList: res => res.data,
})
app.use(VexPage)
<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
设置全局配置, 主要是分页时候参数以及获取方法
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
pageSizeKey | 分页参数 | string | pageSize |
pageNumKey | 分页参数 | string | pageNum |
getList | 获取列表方法 | Function | res => res.data |
getTotal | 获取总数方法 | Function | res => res.total |
组件
table 支持scope类型
- img 图片
- number-col 数字
- input 输入框
- select 下拉框
- tag 标签
- table 表格
- btn 按钮
1.1.23
1 month ago
1.1.22
1 month ago
1.1.21
1 month ago
1.1.20
1 month ago
1.1.24
1 month ago
1.1.19
1 month ago
1.1.18
1 month ago
1.1.17
1 month ago
1.1.16
2 months ago
1.1.15
2 months ago
1.1.14
2 months ago
1.1.12
2 months ago
1.1.13
2 months ago
1.1.11
2 months ago
1.1.10
2 months ago
1.1.9
2 months ago
1.1.8
2 months ago
1.1.7
2 months ago
1.1.6
3 months ago
1.1.5
3 months ago
1.1.4
3 months ago
1.1.3
3 months ago
1.1.2
3 months ago
1.1.1
4 months ago
1.1.0
4 months ago
1.0.28
4 months ago
1.0.27
4 months ago
1.0.26
4 months ago
1.0.25
4 months ago
1.0.19
4 months ago
1.0.18
4 months ago
1.0.17
4 months ago
1.0.16
4 months ago
1.0.22
4 months ago
1.0.21
4 months ago
1.0.20
4 months ago
1.0.24
4 months ago
1.0.23
4 months ago
1.0.15
4 months ago
1.0.9
4 months ago
1.0.8
4 months ago
1.0.11
4 months ago
1.0.10
4 months ago
1.0.14
4 months ago
1.0.13
4 months ago
1.0.12
4 months ago
1.0.7
4 months ago
1.0.6
4 months ago
1.0.5
4 months ago
1.0.4
4 months ago
1.0.3
4 months ago
1.0.2
4 months ago
1.0.1
4 months ago
1.0.0
4 months ago