使用说明

et-element-ui该组件是基于Vue和element-ui开发，该组件主要用于快速开发列表的增删查改功能，只需配置页面上显示的字段，并对各个字段加上对应的显示规则即可显示。

安装

npm install et-element-ui -S
npm install et-element-ui -D

安装使用

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Element)

import EtElementUI from 'et-element-ui'
Vue.use(EtElementUI);

:::

列表属性描述tableConfig

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | tableListName | 列表对应名称 | string | — | — | | page | 是否分页 |boolean | true/false | true | | dialogButton | dialog操作按钮控制，{ add: [通用按钮item即可]} | object | — | [] | | closeOnClickModal | 控制dialog是否点击遮罩关闭 | boolean | true/false | false | | mainDialogWidth | 主要控制dialog宽度，可通过&通用按钮item中进行不同位置 | string | — | [] | | dialogKey | dialog的ref名称 | string | 自定义 | et-dialog | | bottomBtn | 表格下方按钮控制 | object | - | - | | lazy | 是否开启树状懒加载 | boolean | true/false | false | | rowKey |筛序的数据主键 | string | — | 'id' | | buttonsList | 自定义操作按钮{type: 'info',icon: '',event: 'import',name: '导入'} | array/function | — | - | | single | 是否开启单选 | array | — | [{type: 1,key: 'page',value: 'pageNum'},{type: 1,key: 'size',value: 'pageSize'}] |

列表事件

| 事件名 | 说明 | 参数 | | ---- | ---- | ---- | | getList | et-table请求列表触发事件 | params(请求参数) | | onListEvent | 用于用户自定义事件，扩充接口。type为事件类型，row操作的行 | type, row | | onReqParams | 用于用户自定义参数，扩充接口。type为类型，obj为list对象，callback为回调函数用来输出自定义参数 | type, row, callback | | onSubmit | et-dialog中点击确定或自定义按钮触发 | type, row, callback | | formChange | et-table/et-form中input/select等控件触发值监听change事件 | row, item, value |

selectList

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | key | 字段的名字，即field（filed/show.field/search.field/detail.field） | string | - | - | | value | 字段值，array：为静态值,如：[{value: 0, name/label: '禁用'},{value: 1, name/label: '启用'}] | array | — | - |

table_column

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | field | 字段 | string | - | - | | stype | 显示信息类型,值：checkbox,opt,tag,list-tag,link,switch,image,list,mapping,select,input | string | — | - | | name | 字段名称 | string | — | - | | fixed | 字段是否固定 | string | left/right | - | | width | 字段宽度 | int | — | - | | formatter | 根据key-val获取对应的值 | string | — | - | | sort | 字段是否排序 | boolean/string | true/false/custom | false | | ispush | 提交表单时，该字段是否提交 | boolean | — | false | | align | 显示位置 | string | left/center/right | left | | hide | 是否隐藏 | boolean | — | false | | show | 用于控制增加和编辑form表单使用，详细见：table_column show add/update | object | — | - | | search | 用于控制查询条件，详细见：table_column search | object | — | - | | rules | 用于控制文本框合法校验，详细见：table_column rules | array/object | — | - |

table_column show add/update

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | field | 如果该字段存在，则一个该字段给后台，如果没有默认以list为准 | string | - | - | | parent | field字段归属于该字段 | string | - | - | | type | 文本框类型,值：hide,text,password,text-tag,select,cascader,radio,checkboxall,file,switch,date,time-picker,date-picker,textarea,texttime,dynamic,button,span,task,key-val | string | - | - | | ou | 根据mode主键显示文本框 | int | — | - | | obj | 动态获取对应的值 | array | — | - | | isDisabled | 是否在修改时，可编辑该文本框 | boolean | — | false | | remote | 动态搜索远程服务器功能 | boolean | — | false | | findKey | 搜索的字段 | string | — | - | | paramKey | 参数内参数 | string | — | - | | value | 设置默认值 | string | — | - | | placeholder | 文本框描述 | string | — | - |

mode_list search

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | type | 文本框类型，值：text，date，time-picker，select，time-select，datetimerange | string | - | - | | obj | 动态获取对应的值 | array | — | - | | placeholder | 文本框描述 | string | — | - |

mode_list rules

方式一 (基于element-ui的方式配置) array

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | required | 是否必输 | boolean | - | false | | message | 错误提示消息 | string | — | - | | trigger | 触发校验 | array/string | blur/change | - | | min | 最小长度 | int | — | - | | max | 最大长队 | int | — | - | | validator | 自定义校验规则,function代表自定义方法 | string/function | — | - |

mode_list rules

方式二 （只校验是否必填）boolean/array true/false | []