Appearance
自定义表头
应用包：lc-zkcomponents 类型：基础部件
一、效果预览
二、适用场景
由于element的表格组件自带的表头存在样式缺陷，因此考虑基于element表格组件的表头插槽功能实现一个自定义的功能更完善的表头组件，其适用于所有基于element实现的表格内，利用header插槽放入表格的任意一列中，再进行合适的配置，即可快速将表头迭代为符合公司标准且具备更多筛选种类的新表头。
三、使用说明
基础应用：可基于任意一张element的表格，将自定义表头组件拖入表格的任意一列（el-table-column）中，即可实现基础替换功能；也可以从头开始使用组件中的标准表格，其本身就是由自定义表头构成的。
在此基础上，可以选中表头组件，通过右侧的配置项修改表头的样式和功能。
表头重新实现了排序、筛选的功能，以更好地适配后端数据查询功能。 建议在应用表头组件的页面的全局模型data中，自定义一个数据控制条件，例如：
js
state:{
// 记录当前基于什么字段进行排序 （无排序时为null）
sortBy: null,
// 记录是升序降序 （无排序时为null）
sortType: null,
// 记录当前页面所有字段的筛选条件
filter: [],
}3.1 排序功能
当配置了表头某一列支持进行排序时，在表头组件的交互中监听clickItem时间，通过时间主动触发当前表格的排序状态，示例逻辑通过传入当前列的prop值，对比state中的sortBy与传入prop是否一致，若不一致则以传入字段进行升序排序，若一致则还需判断当前的排序状态，若为升序则更新为降序，若为降序则取消排序。
js
updateSort(prop){
if(this.state.sortBy !== prop){
this.state.sortBy = prop;
this.state.sortType = 'asc'
}else {
if(this.state.sortType === null){
this.state.sortType = 'asc'
}else if(this.state.sortType === 'asc'){
this.state.sortType = 'desc'
}else{
this.state.sortBy = null;
this.state.sortType = null
}
}
}3.2 筛选功能
筛选功能可以通过字段的filterUpdate事件获取当前字段更新时的筛选条件，自主处理当前页面的state.filter数据，总结出当前所有字段的筛选条件情况，用于刷新表格数据。
js
// 更新筛选
updateFilter(prop, value){
if(value.length && value.some(d=>d!==null)){
this.filterObj[prop] = value;
}else{
delete this.filterObj[prop]
}
let temp = []
for(let prop in this.filterObj){
temp.push({prop, value: this.filterObj[prop]})
}
this.state.filter = temp
}四、配置项
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| titleFontSize | 计量值 | 16px | 表头字号（展示的列标题） |
| fontSize | 计量值 | 16px | 浮层字号 |
| sortable | 布尔 | false | 是否支持排序 |
| filterType | 枚举 | none | 筛选类型，none=无；checkbox=多选；radio=单选；value=数值；search=搜索；timeRange=时间-日区间； weekRange=时间-周区间； monthRange=时间-月区间 |
| filterWidth | 数值 | 150 | 浮层宽度，最小值150。当选择筛选类型为时间时，建议设置为288 |
| filterOptions | 数组 | [] | 筛选可选项，多选和单选生效，格式为[{"value": "xxx", "text": "xxx" }] |
| defaultValue | 数值或数组 | null | 筛选的默认值 |
五、事件
clickItem：点击表头非筛选部分，用于监听排序的触发，无参数
filterUpdate：表头筛选更新，用于告知表格页面字段的筛选最新值，有两个参数：val-当前最新值，为数组格式 filterType-当前字段的筛选类型，不同的筛选类型有不同的特性，单选为只有一个值的数组；时间、数值为只有两个值的数组，分别表示起始值与结束值。
六、插槽
无