## 版本 1.04 增加功能: 1.page_column[*].show.labelWidth等于 的labelWidth 2.page_column[*].show.itemStyle等于 的style 3.增加validate等于的validate 1.03 增加功能: 1.dx-table-list支持 selectable、selection-change、toggleRowSelection、clearSelection、toggleAllSelection、cell-mouse-enter 功能与 el-table 一致 2.page_column 支持列头后置按钮: page_column[*].headerBtn:{ eventType:'setting',icon:'el-icon-s-tools'} 3.兼容旧版的page_column[*].formatter配置 4.DxTableList.queryParam 增加param默认参数 5.DxTableList.responseSuccess 默认值与后端适配 6.DxTableList.page_status 默认值改为13 7.DxTableList.queryParam为假时,执行@onReqParams 8.page_column[*].show.hidden 是隐藏列 9.page_column[*].show.desc 字段描述 1.02 增加功能: 1.增加selection-change事件 2.去掉参数showHead,使用hideBtnRow 修改文件: list\src\main.vue 1.01 增加功能: 1.表格组件增加排序事件sortReloadData;支持设置默认排序列以及正序倒序,page_column:[{sort: 'descending' }] 2.增加参数showHead,支持隐藏表格组件头部模块 3.page_column支持插槽配置,[{slot: '插槽名称' }] 4.修复编辑页面,单选组件无法赋值问题 5.编辑页面关闭时还原旧数据 修改文件: list\src\buttons.vue list\src\list.vue list\src\main.vue list\src\tables.vue form\src\main.vue input\src\tool-input.js ## 使用说明 em-element-ui该组件是基于Vue和element-ui开发,该组件主要用于快速开发列表的增删查改功能,只需配置页面上显示的字段,并对各个字段加上对应的显示规则即可显示。 ## 依赖安装 ```shell npm install element-ui -S ``` ## 使用 ``` javascript import Vue from 'vue' import Element from 'element-ui' Vue.use(Element) import DxTableList from 'submodule/dx-element-ui/packages/list/index.js' import DxForm from 'submodule/dx-element-ui/packages/form/index.js' import 'submodule/dx-element-ui/style/index.scss' DxTableList.props.axios.default = () => { return axiosRequestParams() } Vue.use(DxTableList) Vue.use(DxForm) ``` ::: ### 列表属性描述 | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | custTableTitle | 列表左上角名称 | String | — | — | | isMultiple | 启用多选列 | boolean | — | — | | tableListName | 列表对应名称 | string | 必填 | — | | source | table表数据的来源。data表示自定义数据;query是通过URL动态获取,如:table queryURL | string | data/query | query | | sourceData | source值为data时使用 | array | — | [] | | rowKey | 表示table对应的字段显示下三角 | string | — | - | | mode_list | 修改和编译列表时,各个字段显示在不同的mode区域 | array | — | [] | | page_status | 控制显示内容,1:搜索条件;2:选择显示列;4:表格;8:分页功能;16:增加按钮;32:删除按钮;64:全局搜索控件 | int | — | 12 | | page_column | 列表对应字段 | array | 必填 | - | | select_list | 列表中存在select组件,使用key-value对应 | object | — | - | | composeParam | 删除主键 | array | — | ['id'] | | buttonsList | 自定义操作按钮{type: 'info',icon: '',event: 'import',name: '导入'} | array/function | — | - | | leftButtonsList | 自定义操作按钮-列表左上角显示 {type: 'info',icon: '',event: 'import',name: '导入'} | array/function | — | - | | queryParam | 自定义list分页功能,格式:[{type: 1,key: 'page',value: 'pageNum'},{type: 1,key: 'size',value: 'pageSize'},{type: 2,key: 'param',value: {}}] | array | — | [{type: 1,key: 'page',value: 'pageNum'},{type: 1,key: 'size',value: 'pageSize'}] | | dialogFooter | 自定义dialog按钮,正在开发... | array | — | ['id'] | | axios | 自定义请求头文件和超时时间,axios定义的参数 | object | — | {timeout: 5000, headers: {}} | | optRules | 删除前校验规则,如:isRules: true,_method: 'post',_url: '/',params: {busCode: function(row,field){//根据key获取删除记录对应的值},pageNum: 1,pageSize: 10},_axios: {},message: '该记录在数据中有关联,请先删除关联数据! | object | — | - | | responseSuccess | response返回字段校验{key:'code', value: 0, message: 'message'} | object | — | - | ### 列表事件 | 事件名 | 说明 | 参数 | | ---- | ---- | ---- | | onListEvent | 用于用户自定义事件,扩充接口。type为事件类型,row操作的行 | type, row | | onReqParams | 用于用户自定义参数,扩充接口。type为类型,obj为list对象,callback为回调函数用来输出自定义参数 | type, row, callback | | afterTableData | 拿到接口返回的数据 | res | ### table queryURL queryURL是一个自定义请求参数,以key-val方式传递,key代表是请求事件,如:add/edit/list/del和自定义事件,注意:key为name时,是新增和编辑左上角title提示;val为对象,描述如下: | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | url | 请求地址 | string | - | - | | method | 请求方式 | string | — | - | | name | 删除时回显字段 | string | — | - | | isArray | 多字段组合删除时,支持多个删除 | string | — | - | | success | response返回字段校验{key:'code', value: 0, message: 'message'} | object | — | - | ### mode_list | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | ou | 区域的主键 | int | - | - | | name | 区域的名称 | string | — | - | ### select_list | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | key | 字段的名字 | string | - | - | | value | 字段值,array:为静态值,如:[{value: 0, label: '禁用'},{value: 1, label: '启用'}];object:为动态获取值,如:{url: '/',props: {value: 'oid', label: 'name'},node:['data', 'list'],params: {page: 1, size: 10}} | array/object | — | - | ### page_column table | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | field | 字段 | string | - | - | | stype | 显示信息类型,值:checkbox,opt,tag,list-tag,link,switch,image,list,mapping | string | — | - | | name | 字段名称 | string | — | - | | fixed | 字段是否固定 | string | left/right | - | | width | 字段宽度 | int | — | - | | action | 动态请求该字段值 | string | — | - | | 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表单使用,详细情况:mode_list add/edit | object | — | - | | search | 用于控制查询条件,详细情况:mode_list search | object | — | - | | rules | 用于控制文本框合法校验,详细情况:mode_list rules | array | — | - | | success | response返回字段校验{key:'code', value: 0, message: 'message'} | object | — | - | ### mode_list add/edit | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | 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 | | hidden | 是隐藏列 | boolean | — | false | | remote | 动态搜索远程服务器功能 | boolean | — | false | | findKey | 搜索的字段 | string | — | - | | paramKey | 参数内参数 | string | — | - | | value | 设置默认值 | string | — | - | | placeholder | 文本框描述 | string | — | - | | action | 动态提交事件 | string | — | - | | param | 动态提交事件,解释值:{key: 'code', value: 200, filename: 'data'} | obj | — | - | | mapping | type为select,当前字段映射显示对应字段值 | string | — | - | | success | response返回字段校验{key:'code', value: 0, message: 'message'} | object | — | - | ### mode_list search | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | type | 文本框类型,值:text,date,time-picker,select,time-select,datetimerange | string | - | - | | obj | 动态获取对应的值 | array | — | - | | placeholder | 文本框描述 | string | — | - | ### mode_list rules | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | required | 是否必输 | boolean | - | false | | message | 错误提示消息 | string | — | - | | trigger | 触发校验 | array/string | blur/change | - | | min | 最小长度 | int | — | - | | max | 最大长队 | int | — | - | | validator | 自定义校验规则,function代表自定义方法 | string/function | — | - | ::: ### 组件实例 | 属性 | 说明 | 类型 | |---------- |-------------- |---------- | | multipleSelection | 多选开启时,选择的数据列表 | Array | ### DEMO演示 ```html 手机端图片显示线和柱状图