essential-com
Version:
### 介绍 ---
207 lines (178 loc) • 5.68 kB
Markdown
### 自定义表格
```vue
<custom-form
:list-query="form"
:form-item="formItem"
label-with="80px"
/>
```
```typescript
private form:any = {
name: '',
phone: '',
channel: '',
time: [],
gender: 'male',
checkbox: []
}
private formItem:any[] = [
{
type: 1,
label: '姓名',
key: 'name',
attrs: {
placeholder: '请输入姓名'
}
},
{
type: 1,
label: '电话',
key: 'phone',
attrs: {
placeholder: '请输入电话'
}
},
{
type: 2,
label: '来源渠道',
key: 'channel',
attrs: {
// disabled: true,
clearable: true,
multiple: true,
placeholder: '请选择来源渠道'
},
options: [
{
label: '58同城',
value: '58'
},
{
label: '朋友圈',
value: 'wechat'
}
]
},
{
type: 3,
label: '日期',
key: 'time'
},
{
type: 4,
label: '性别',
key: 'gender',
options: [
{
label: '男',
value: 'male'
},
{
label: '女',
value: 'female'
}
]
},
{
type: 5,
label: '复选框',
key: 'checkbox',
options: [
{
label: '北京',
value: 'beijing '
},
{
label: '上海',
value: 'shanghai'
}
]
}
]
```
| 字段 | 解释 | 类型 | 是否必填 |
| --------- | ---------------------------------- | -------- | -------- |
| type | 表单组件类型 | Number | 是 |
| label | 汉字显示 | String | 是 |
| key | v-model绑定form对应的属性 | String | 是 |
| options | 下拉框，radio等对应的列表 | Array | 否 |
| attrs | Input、select等对应的属性 | Object | 否 |
| rules | 表单校验(参考element-ui的表单验证) | Object | 否 |
| col | 单元格独占几列 | Number | 否 |
| listeners | 出入组件的事件 | Function | 否 |
> form表单type的类型
| 值 | 解释 | 类型 |
| :--- | ------------ | ------ |
| 1 | 输入框 | Number |
| 2 | 日期时间区间 | Array |
| 3 | radio | Array |
| 4 | Cascader | Number |
| 5 | 下拉框 | Array |
| 6 | checkbox | Date |
| 7 | 时间选择 | Array |
| 8 | cascader | Number |
> 表单触发的事件
| 事件名 | 类型 | 返回值 |
| ------ | -------- | ------- |
| onPass | Function | Boolean |
### 自定义表格
```vue
<custom-table
ref="CustomTable"
border
:table-data="tableData"
:columns="columns"
:page="page"
@onPageSize="handlePageSize"
>
<template v-slot:operate="scope">
<el-button
type="primary"
size="small"
@click="alert(scope.row.name)"
>
新增
</el-button>
<el-button
type="info"
size="small"
>
编辑
</el-button>
</template>
</custom-table>
```
> custom-table可以传任何el-table支持的属性
| 字段 | 类型 | 解释 | 是否必填 |
| ------------- | ------ | ------------------------------------ | -------- |
| tableData | Array | 和el-table传的一样 | 是 |
| columns | Array | 定义列的数组 | 是 |
| page | Object | 分页的对象 | 是 |
| operationList | Array | 批量操作(具体选项参考批量操作的组件) | 否 |
> columns字段
| 字段 | 解释 | 类型 | 是否必填 |
| ------ | -------------- | -------------------------- | -------- |
| label | 列的名字 | String | 是 |
| slot | 是否自定义插槽 | Boolean | 否 |
| fixed | 固定哪些列 | 和el-table固定列的参数一致 | 否 |
| moreOp | 下拉菜单 | Array | 否 |
| key | 列的字段 | String | 是 |
> moreOp字段介绍
| 字段 | 解释 | 类型 | 是否必填 |
| -------- | ---------------- | -------------- | -------- |
| label | 下拉的汉字 | string | 是 |
| value | 点击的值 | string | 是 |
| icon | 图标 | string | 是 |
| attrs | item上绑定的属性 | 和el-input一样 | 否 |
> page对象
| 字段 | 解释 | 类型 | 是否必填 |
| ----- | ------------- | ------ | -------- |
| page | 当前页---页码 | Number | 是 |
| limit | 每页的条数 | Number | 是 |
| total | 总条数 | Number | 是 |
> 向父组件触发的事件
| 事件名称 | 类型 | 解释 |
| ---------- | -------- | ---------------------- |
| onPageSize | function | 分页触发的事件 |
| onCommand | Function | 点击下拉菜单触发的事件 |
| olclick | Function | 批量操作触发的事件 |