dx-element-ui

版本

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开发，该组件主要用于快速开发列表的增删查改功能，只需配置页面上显示的字段，并对各个字段加上对应的显示规则即可显示。

依赖安装

npm install element-ui -S

使用

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

<div class="template-main">
    <em-table-list :tableListName="'collect'" :sourceData="sourceData" :source="source" :mode_list="mode_list" :page_status="page_status" :page_column="page_column" :select_list="select_list" @onListEvent="onListEvent"></em-table-list>
</div>

手机端图片显示线和柱状图

<em-charts :webUIType="'f2'" :chartOptions="charts"></em-charts>