el-table筛选数据

• ​ filter-multiple 是否开启多选
• ​ filters 筛选项
• ​ filter-method 筛选条件
• ​ filter-change 筛选条件改变时触发

  
  
    
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1. filter-multiple

是否开启多选

2. filters

filters 接收一个数组对象，label是显示的文字，value是筛选时的数据

这里筛选项根据列表column循环生成的，你也可以手动生成

 //计算属性
 computed: {    
    // 筛选项
    filterData(){
      return function(data){
        let obj = [];
        //找到对应的数据 并添加到obj
        this.tableData.filter(item => {
            obj.push({
              text:item[data.value],
              value:item[data.value]
            })
        })
        //因为column有重复数据，所以要进行去重
        return this.deWeight(obj) 
      }
    },
  },
 
  //方法
  methods: {
    // 数组对象去重
    deWeight(arr) {
      for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].text == arr[j].text) {
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

filterTag

这一步返回符合条件的数据

    //返回符合条件的数据
    // 参数分别是：选中的条件 、当前行 、当前列
     filterTag(value, row, column) {
        const property = column['property'];
        return row[property] === value;
    },
1
2
3
4
5
6

自此就能实现表头筛选功能了

二、筛选数据后获取筛选后的数量
据我查找element好像没有提供这个功能，所以只能手动实现了。所幸element提供了一个方法：@filter-change 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组（注意执行时机）

    _filterChange() {
      this.totalSize = this.$refs.table.tableData.length;
      console.log(this.totalSize);
    },
1
2
3
4