ElementUI中Table表格实现筛选功能 并 获取筛选后的数量

一、table实现筛选功能

通过官网文档已知：

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

表格部分

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;
    }
  },

filterTag

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

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

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

二、筛选数据后获取筛选后的数量

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

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

完整代码