Appearance
表格(含列设置)
应用包: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的修改同时进行。注意根据是否为多级表头表格有两个模板,根据需求选择合适的表格进行初始化。