cxs-ui
Version:
Vue 动态表格组件和动态表单组件
493 lines (439 loc) • 14.8 kB
Markdown
<h1 style="text-align: center;font-size: 60px">cxs-ui</h1>
<p style="text-align: center">
<a href="https://www.npmjs.com/package/cxs-ui">
<img src="https://img.shields.io/npm/v/cxs-ui?color=blue">
</a>
<a href="LICENSE">
<img src="https://img.shields.io/badge/License-MIT-yellow.svg">
</a>
<a href="https://www.npmjs.com/package/cxs-ui">
<img src="https://img.shields.io/npm/dw/cxs-ui?label=%E4%B8%8B%E8%BD%BD%E9%87%8F">
</a>
<a href="https://www.npmjs.com/package/cxs-ui">
<img src="https://img.shields.io/bundlephobia/min/cxs-ui?label=Size">
</a>
<a href="https://www.npmjs.com/package/cxs-ui">
<img src="https://img.shields.io/npm/dependency-version/cxs-ui/element-ui?color=green">
</a>
</p>
## 安装
```vue
npm i cxs-ui -S
```
## 全局引用
在main.js中引入组件
```vue
import CxsUI from 'cxs-ui'
Vue.use(CxsUI)
```
## 组件
cxs-table 表格组件
cxs-form 表单组件
cxs-select下拉列表
## 运行效果
自动生成表格的列和列头
可通过table-attr数据动态改变表格的列和列头
通过form-attr数据自动生成表单项
可自定义底部按钮
通过传入不同的column，动态改变表单的列
# 表格组件
```vue
<!--
属性：
selectable: 是否展示选择框
table-attr： 表格属性
table-data: 表格数据
page: 分页配置
show-view: 是否在操作列显示默认的view按钮
show-edit： 是否在操作列显示默认的edit按钮
show-delete： 是否在操作列显示默认的delete按钮
方法：
viewClick: 点击编辑按钮的回调
editClick: 点击编辑查看的回调
deleteClick: 点击删除按钮的回调
handleSearch: 点击查询按钮的回调
pagerChange: 分页的当前页面和每页显示条数改变时的回调
插槽:
默认插槽: 自定义列
handle插槽: 可自定义操作列的按钮
-->
<cxs-table
:selectable=true
:table-attr="tableAttr"
:table-data="tableData"
:page="pageOption"
:show-view="false"
:show-edit="true"
:show-delete="true"
@editClick="showEdit"
@deleteClick="row => confirm(() => delHandle(row.id))"
@handleSearch="searchHandle"
@selectionChange="handleSelectionChange"
@pagerChange="pagerChange"
>
<template v-slot:handle="scope">
<el-button size="small" type="text" @click="roleHandle(scope.row.id)" v-if="hasAuth('sys:user:role')">分配角色</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="small" type="text" @click="repassHandle(scope.row.id, scope.row.username)"
v-if="hasAuth('sys:user:repass')">重置密码</el-button>
</template>
</cxs-table>
```
## 属性
### table-attr 列属性
| 名称 | 说明 | 可选值 | 默认值 |
|:---:|:---:|---|:---:|
| type | 列类型 | string类型，可选值：<br> default：普通列<br> avatar：头像列<br> tag：标签列<br> handle：操作列 | default |
| field | 列名称 | string类型。<br>例：name,username等。 | |
| label | 列标题 | string类型。<br>例：姓名，用户名等 | |
| width | 列宽 | string类型。例：100 | |
| header | 列头类型 | string类型，可选值：<br> input：输入框，<br>  select：下拉列表，<br>  daterange：日期范围选择框，<br>  search：查询按钮 | input |
| options | 下拉列表 | Array类型，当header为select时生效。例：<br>options: [<br>  {value: '0', label: '禁用', type: 'danger'},<br>  {value: '1', label: '正常', type: 'success'},<br>] | |
| children | 嵌套列 | Array对象，里面的每个元素都是一个table-attr对象。例：<br>children: [<br>  {field: 'income', label: '收入', sortable: true, width: 80},<br>  {field: 'expend', label: '支出', sortable: true, width: 80}<br>] | |
| handle | 操作列 | Object类型，当type为handle时生效。例：<br>handle: {<br>  view: {label: '查看'},<br>  edit: { label: '编辑', type: 'text', size: 'small'},<br>  delete: { label: '删除'}<br>} | |
### table-data 表格数据
K,V键值对集合，键值对中的Key对应table-attr中的field。
示例：
```vue
[
{ id: 1, name: '张三', username: 'admin', phone: '18709581727', avatar: '/favicon.ico', status: 0},
{ id: 2, name: '李四', username: 'lisi',status: 1,
income: 2311.67, expend: 833.01,
roles: [1, 2],
// view/edit/delete为false时禁用该行的相应按钮，默认为true
handle: {view: false, edit: false}
}
]
```
### page 分页配置
```vue
page = {
current: 1, // 当前页面
size: 10, // 当前页条数
total: 11, // 总条数
sizes: [10, 20, 50, 100] //
}
```
## 方法
viewClick 点击查看
editClick 点击编辑
deleteClick 点击删除
selectionChange 表格选择项发生变化
handleSearch 点击查询按钮
pagerChange 分页改变后的回调
## 示例
```vue
<template>
<div class="hello">
<cxs-table
:selectable=true
:table-data="tableData"
:table-attr="tableAttr"
:page="pageOption"
:show-view="false"
:show-edit="true"
:show-delete="true"
@editClick="showEdit"
@deleteClick="row => confirm(() => delHandle(row.id))"
@handleSearch="searchHandle"
@selectionChange="handleSelectionChange"
@pagerChange="pagerChange"
></cxs-table>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
tableData: [
{ id: 1, name: '张三', username: 'zhangsan', phone: '18709581727', avatar: '/favicon.ico', status: '0',
income: 231.67, expend: 6543.00,
roles: [1, 2],
createTime: '2022-06-08T21:35:33'
},
{ id: 2, name: '李四', username: 'lisi', phone: '18709581727', avatar: '/favicon.ico', status: '1',
income: 2311.67, expend: 833.01,
roles: [2],
createTime: '2022-06-08T21:35:33',
// view/edit/delete为false时禁用该行按钮，默认为true
handle: {view: false, edit: false}
}
],
tableAttr: [
{type: 'avatar', field: 'avatar', label: '头像', width: '50'},
{field: 'name', label: '姓名', width: '120', header: 'input'},
{field: 'username', label: '用户名', header: 'input'},
{label: '金额',
children: [
{field: 'income', label: '收入', sortable: true, width: 80},
{field: 'expend', label: '支出', sortable: true, width: 80}
]
},
{type: 'tags', field: 'roles', label: '角色', header: 'select',
options: [
{value: '1', label: '超级管理员'},
{value: '2', label: '管理员'},
]
},
{field: 'phone', label: '手机号', sortable: true, header: 'input'},
{type: 'tag', field: 'status', label: '状态', header: 'select',
options: [
{value: '0', label: '禁用', type: 'danger'},
{value: '1', label: '正常', type: 'success'},
]
},
{field: 'createTime', label: '创建时间', header: 'daterange', width: 250},
{type: 'handle', field: 'handle', label: '操作', fixed: 'right', header: 'search', width: 140,
handle: {
edit: { label: '编辑', type: 'text', size: 'small'},
delete: { label: '删除'}
}
}
]
}
},
methods: {
searchHandler(data) {
console.log(data)
},
viewClick(data) {
console.log(data)
}
}
}
</script>
```
# 表单组件
```vue
<!--
属性：
width: 表单的宽度
title:标题
column: 表单项的列数，控制表单的组件显示成1列或N列，inline为true时才生效。
form-attr: 表单属性
show:显示/隐藏表单
item-width: 表单项宽度
data:表单回显数据
inline:让表单域变为行内的表单域. true: 行内表单，false: 非行内表单
方法：
onSubmit:点击默认的提交按钮的回调
-->
<cxs-form width="900"
title="用户"
column="2"
:form-attr="formAttr"
:show.sync="dialogVisible"
:data="formData"
:inline="false"
@onSubmit="submit"
>
</cxs-form>
```
## 属性
### width
说明：表单的宽度
默认：'600'
示例：`<cxs-form width="900"></cxs-form>`
### title
说明：表单的标题后半部分，当传入的data对象有id时，标题为'编辑'+title，没有id时标题为'新增'+title
默认：''
示例：`<cxs-form title="用户"></cxs-form>`
### column
说明：指定表单显示成几列，inline为true时才会生效。
默认：'1'
示例：
```vue
<cxs-form :column="column" :inline="true"></cxs-form>
...
data() {
return {
column: "1"
}
}
```
### form-attr
 说明：表单项的数据
 参数：
* **field**
说明：表单项名称
示例：
```
{ field: 'name' },
{ field: 'username' },
```
* **label**
说明：表单项标题
示例：
```
{ field: 'name', label: '姓名' },
{ field: 'username', label: '用户名' }
```
* **type**
说明：表单项类型
默认：input
可选值： input, select, radio, date, checkbox, switch, password
示例：
```
{ field: 'name', label: '姓名', type: 'input'},
{ field: 'status', label: '状态', type: 'radio'},
{ field: 'createDate', label: '日期', type: 'date'}
```
* **rules**
说明：表单项验证规则
默认：{}
示例：
```
{ field: 'name', label: '姓名', type: 'input',
rules: [
{ required: true, message: '姓名不能为空' }
]
},
```
* **disabled**
说明：禁用表单项
默认：`false`
示例：`{ field: 'name', type: 'input', disabled: true }`
</br>
* **options**
说明：下拉列表或单选/多选按钮的选项,只有type为select/radio/checkbox时才生效。
默认：[]
参数：
* value: 选项的值
* label: 选项的左边标签
* comment: 选项的右边标签（可选）
示例：
```vue
{ field: 'type', label: '类型', type: 'select',
options: [
{ value: 0, label: 'default', comment: '默认'},
{ value: 1, label: 'avatar', comment: '头像'},
{ value: 2, label: 'select', comment: '列表'}
]
}
```
* **valuekey**
说明：当表单类型为select/radio/checkbox时，指定选项的value的key
默认：`value`
示例：
```vue
{field: 'type', label: '类型', type: 'select', valuekey: 'value1',
options: [
{ value1: 0, label: 'default' },
{ value1: 1, label: 'avatar' },
{ value1: 2, label: 'select' }
]
}
```
* **labelkey**
说明：当表单类型为select/radio/checkbox时，指定选项的label的key
默认：`label`
示例：
```vue
{field: 'type', label: '类型', type: 'select', labelkey: 'title',
options: [
{ value: 0, title: 'default'},
{ value: 1, title: 'avatar'},
{ value: 2, title: 'select'}
]
}
```
* **commentkey**
说明：当表单类型为select时，指定选项的comment的key
默认：`label`
示例：
```vue
{field: 'type', label: '类型', type: 'select', commentkey: 'information',
options: [
{ value: 0, label: 'default', information: '默认'},
{ value: 1, label: 'avatar', information: '头像'},
{ value: 2, label: 'select', information: '列表'}
]
}
```
## 方法
* **onSubmit**
说明：点击提交后的回调，返回data
```vue
<cxs-form @onSubmit="handleSubmit"></cxs-form>
..
methods: {
handleSubmit(data) {
}
}
```
## 插槽
### 自定义底部按钮
```vue
<cxs-form
...
>
<template v-slot:footer>
<el-button @click="handleClick1">自定义按钮1</el-button>
<el-button>自定义按钮2</el-button>
</template>
</cxs-form>
```
## 示例
```vue
formData: {status: 1, type: 0, roles: [1], date: '2022-1-1' },
formAttr: [
{ field: 'name', label: '姓名', type: 'input', rules: [{required: true, message: '姓名不能为空'}]},
{ field: 'username', label: '用户名', type: 'input', rules: [{required: true, message: '用户名不能为空'}]},
{ field: 'phone', label: '手机号', type: 'input', disabled: true},
{ field: 'roles', label: '角色', type: 'checkbox'},
{
field: 'status', label: '状态', type: 'radio',
options: [
{value: 0, label: '禁用'},
{value: 1, label: '正常'}
]
},
{field: 'type', label: '类型', type: 'select',
options: [
{value: 0, label: 'default', comment: '默认'},
{value: 1, label: 'avatar', comment: '头像'},
{value: 2, label: 'select', comment: '列表'},
{value: 3, label: 'handle', comment: '操作'}
]
},
{field: 'date', label: '日期', type: 'date'}
]
```
# 下拉列表
```vue
<common-select
:options="options"
:value.sync="value"
valuekey="value1"
labelkey="label1"
@change="selectChange">
</common-select>
```
## 属性
### options
说明：下拉选项
示例：
```vue
options: [
{ value1: '1', label1: '黄金糕', comment: '黄金糕' },
{ value1: '2', label1: '双皮奶', comment: '双皮奶' },
{ value1: '3', label1: '蚵仔煎', comment: '' },
{ value1: '4', label1: '龙须面', comment: '' },
{ value1: '5', label1: '北京烤鸭', comment: '' }
]
```
### valuekey
说明：指定value的key
默认：'value'
### labelkey
说明：指定label的key
默认：'label'
### commentkey
说明：指定comment的key
默认：'comment'