element ui table 增加筛选的方法示例

Element UI Table筛选功能增强示例：动态添加筛选规则

在Element UI的Table组件中，当表头数据较多并且是通过v-for循环动态生成时，如何为虚拟DOM添加筛选规则是一个挑战。本文将向你展示如何实现这一功能。

假设我们的表头数据是通过以下方式动态生成的：

```javascript

this.tableHead = [

{id: '1', label: '姓名', filter: []}, // 这里filter属性用于存放对应的筛选规则

{id: '2', label: '年龄', filter: []},

// ...其他表头数据

];

```

要在表头添加筛选规则，可以利用Element UI提供的`filters`和`filter-method`两个属性。其中`filters`用于定义筛选选项，而`filter-method`用于定义筛选逻辑。

以下是如何给表头添加筛选规则的步骤：

步骤一：定义筛选规则

对于每个需要筛选的表头，在对应的`tableHead`项中定义`filter`属性。例如：

```javascript

// 对姓名列添加筛选规则，假设从后端获取到的筛选关键字是'张三'和'李四'

this.tableHead[0].filter = [{ text: '张三', value: '张三' }, { text: '李四', value: '李四' }];

```

步骤二：处理后端数据并生成筛选规则

假设你从后端获取的数据包含需要筛选的文本和值，可以使用以下方式处理并生成筛选规则：

```javascript

this.tableData.forEach((item) => {

// 根据后端数据生成筛选规则，并添加到对应的filter列表中

this.tableHead[0].filter.push({ text: item.name, value: item.name }); // 以姓名列为例

});

```

由于可能存在重复的文本和值，因此需要对生成的筛选规则进行去重处理。可以使用如下去重函数：

```javascript

uniqArrObject(arr) {

let result = {}; // 用于存储不重复的对象

let finalResult = []; // 用于存储去重后的数组

for (let i = 0; i < arr.length; i++) {

if (!result[arr[i].text]) { // 检查是否已经存在相同的text值

result[arr[i].text] = true; // 标记已存在，避免重复添加相同的对象到结果数组中

finalResult.push(arr[i]); // 将当前对象添加到结果数组中

}

}

return finalResult; // 返回去重后的数组列表

}

```

使用该函数对生成的筛选规则进行去重处理：

`filterList = this.uniqArrObject(filterList);` 确保每个表头的筛选规则列表都是唯一的。这样我们就得到了最终的筛选规则内容。接下来是定义筛选规则的方法。在Element UI中，可以通过定义`filterHandler`函数来实现自定义的筛选逻辑。例如：