Skip to content
本页目录

表格(含列设置)

应用包:lc-zkcomponents 类型:页面模板

一、效果预览

二、适用场景

当用户存在需要主动设置表格展示哪些列、并自己控制这些列的展示顺序时,可以使用这个模板来实现相应的功能,一般适用于表格列数较多需要用户根据自身要求调整的情况。

三、使用说明

基于模板生成页面后,在全局模型中修改cols数据,cols是一个数组,其每一项代表着一列数据,每一列数据支持配置的东西如下:

key类型描述
prop字符串列对应的数据key值
label字符串预期展示的列名称
min-width数值最小宽度
align字符串内容对齐方式
fixed布尔列是否固定,true时居左固定
class-name字符串列的类名
sortable布尔是否可排序
titleFontSize字符串表头字号,如'16px'
fontSize字符串浮层字号,如'16px',用于筛选浮层的基础字号
dataType字符串数据类型,用于数据的格式化,可定为time或value表示时间或数值
dataOption对象数据配置
dataOption.precision数值保留小数位数,dataType为value时有效
dataOption.unit字符串单位,dataType为value时有效
dataOption.fmt字符串时间格式化,yyyy MM dd hh mm ss分别表示年月日时分秒,dataType为time时有效
filterType筛选类型none=无 checkbox=多选 radio=单选 value=数值 timeRange=时间
filterWidth数值浮层宽度
filters数组过滤的可选项
filters[n].text字符串选项名称
filters[n].value字符串选项值

列设置按钮的弹窗是统一提供的,会根据表格cols变量作为参数传入,修改完成后返回并更新cols。

注意

基础使用时可基于cols现有的列调整prop和label快速响应业务需求,后按需细化筛选项等设置,注意prop的调整需结合tableData的修改同时进行。注意根据是否为多级表头表格有两个模板,根据需求选择合适的表格进行初始化。

内部资料,请勿外传