cxs-ui
## 安装
```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
分配角色
重置密码
```
## 属性
### table-attr 列属性
| 名称 | 说明 | 可选值 | 默认值 |
|:---:|:---:|---|:---:|
| type | 列类型 | string类型，可选值：
default：普通列
avatar：头像列
tag：标签列
handle：操作列 | default |
| field | 列名称 | string类型。
例：name,username等。 | |
| label | 列标题 | string类型。
例：姓名，用户名等 | |
| width | 列宽 | string类型。例：100 | |
| header | 列头类型 | string类型，可选值：
input：输入框，
select：下拉列表，
daterange：日期范围选择框，
search：查询按钮 | input |
| options | 下拉列表 | Array类型，当header为select时生效。例：
options: [
{value: '0', label: '禁用', type: 'danger'},
{value: '1', label: '正常', type: 'success'},
] | |
| children | 嵌套列 | Array对象，里面的每个元素都是一个table-attr对象。例：
children: [
{field: 'income', label: '收入', sortable: true, width: 80},
{field: 'expend', label: '支出', sortable: true, width: 80}
] | |
| handle | 操作列 | Object类型，当type为handle时生效。例：
handle: {
view: {label: '查看'},
edit: { label: '编辑', type: 'text', size: 'small'},
delete: { label: '删除'}
} | |
### 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
```
# 表单组件
```vue
```
## 属性
### width
说明：表单的宽度
默认：'600'
示例：``
### title
说明：表单的标题后半部分，当传入的data对象有id时，标题为'编辑'+title，没有id时标题为'新增'+title
默认：''
示例：``
### column
说明：指定表单显示成几列，inline为true时才会生效。
默认：'1'
示例：
```vue
...
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 }`
* **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
..
methods: {
handleSubmit(data) {
}
}
```
## 插槽
### 自定义底部按钮
```vue
自定义按钮1
自定义按钮2
```
## 示例
```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
```
## 属性
### 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'