et-element-ui

使用说明

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 | []