对el-table某一列数据进行去重处理
时间: 2023-08-05 22:10:36 浏览: 100
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
可以使用自定义过滤器来实现el-table某一列数据的去重处理。
首先,在el-table中,设置该列的filter属性为自定义过滤器的名称:
```html
<el-table-column prop="columnName" label="列名" :filters="distinctFilterOptions" :filter-method="doFilter"></el-table-column>
```
其中,`distinctFilterOptions` 是一个选项数组,表示过滤器的可选项,例如:
```javascript
data() {
return {
distinctFilterOptions: [
{ text: '18岁', value: 18 },
{ text: '20岁', value: 20 },
{ text: '22岁', value: 22 },
],
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 18 },
{ name: '赵六', age: 20 },
{ name: '钱七', age: 22 },
],
};
},
```
然后,在Vue实例中定义该自定义过滤器:
```javascript
methods: {
doFilter(value, row, column) {
const age = row[column.property];
return value.includes(age);
},
}
```
上述自定义过滤器的实现方法是利用了 `Array.includes` 方法,判断该行数据的年龄是否在过滤器选项中的值。
需要注意的是,如果该列的数据是对象类型,需要在 `doFilter` 方法中指定对象的属性进行比较,例如:
```html
<el-table-column prop="columnObj" label="列名" :filters="distinctFilterOptions" :filter-method="doFilter"></el-table-column>
```
```javascript
methods: {
doFilter(value, row, column) {
const propertyName = 'age'; // 对象的属性名
const age = row[column.property][propertyName];
return value.includes(age);
},
}
```
其中,`propertyName` 是该对象的属性名。
阅读全文