view-design 组件库表格筛选条件联动保留前面筛选条件的高亮状态

view-design 组件库表格筛选条件联动保留前面筛选条件的高亮状态

问题：当第一个筛选条件选中，第二个筛选条件会联动变化，此时会导致整个 table 组件刷新，那么第一个筛选条件的高亮状态会被清除

解决思路

通过编辑组件库的 Table 组件相关的源码实现页面刷新之后，仍然能保留第一个筛选条件的高亮状态

实现思路

组件库的 table-head 组件里的 headRows 计算方法，会返回最新的表格列的配置数据。

当选中第一个筛选项时，会触发第二个筛选项数据的更新，此步操作的最后结果是 Table 组件会计算最新的 columns 表格列配置数据，并传递给 table-head 组件，table-head 组件时用 headRows 来计算接收最新的 columns 表格列配置数据，我们只要在此处拦截并做处理，即可将前一个筛选项的高亮状态恢复；

实现步骤

1. 在视图组件里定义参数 defaultCheckeFilters （自行取名，与后面的传参名称保持一致即可）

data(){
    return {
        defaultCheckeFilters: []
    }
}

2. 在组件库的 table 组件定义 props defaultCheckeFilters 接收视图组件传递过来的值

// custorm
defaultCheckeFilters: {  // 表格过滤条件选中项默认值
    type: Array,
    default: () => ([])
}

 

3. 在组件库的 table-head 组件定义 props defaultCheckeFilters 接收 table 组件传递过来的值

defaultCheckeFilters: Array

4. 在视图组件中将 defaultCheckeFilters 变量传递给组件库的 table 组件，再从组件库的 table 组件将 defaultCheckeFilters 变量传递给组件库的 table-head 组件

5. 组件库的 table-head 组件中，在 headRows 计算函数里通过该变量值恢复前面选中的筛选项

headRows () {
    const isGroup = this.columnRows.length > 1;
    if (isGroup) {
        return this.fixed ? this.fixedColumnRows : this.columnRows;
    } else {
        this.columns.map(item => {
            // 1. 使用了过滤 2. 过滤选项不为空 3. 不为多选过滤 3. 当前未选中过滤
            if(item.filters && item.filters.length && !item._filterMultiple && item._filterChecked.length === 0){
                const index = item._index
                this.defaultCheckeFilters.map(checked => {
                    // 当前列的过滤选项里包含内置选项
                    const isContainedItem = item.filters.some(filterValue => filterValue.value === checked.value)
                    // 当内置过滤值的索引与表格的索引一致时
                    if(index === checked.index && isContainedItem){
                        item._filterChecked = [checked.value]
                        item._isFiltered = true
                    }
                })
            }
        })
        
    return [this.columns];
    }
},

 

应用场景一：在页面初始化的时候就要高亮选中筛选项；

直接在 defaultCheckeFilters 里赋值即可，会自动高亮第二列和第三列的 "第二列选中项的值" 选项、"第三列选中项的值" 选项

data(){
	return {
		defaultCheckeFilters: [
			{
				index: 2,
				value: '第二列选中项的值'
			},
			{
				index: 3,
				value: '第三列选中项的值'
			}
		]
	}
}

应用场景二：在第一个筛选项发生改变触发第二个筛选项值变化并导致表格刷新时，仍然保留第一个筛选项选中项高亮状态；

在第一个筛选项发生改变时，将选中的值和当前列的索引放入 defaultCheckeFilters 参数里

filterRemote: (arr, key, column) => {
	const value = arr[0] !== undefined ? arr[0] : ''
	this.filterParams.category = value
	// 关键一步
	this.defaultCheckeFilters = [
		{
			index: column._index,  // 当前列的索引
			value,  // 选中的值
		},
	]
},