el-table筛选数据

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

  <!-- 表格部分 -->
  <el-table
    ref="table"
    :data="tableData"
    @filter-change="_filterChange"
    border
    >
    <template v-for="(item, index) in dataList">
      <el-table-column
        sortable
        :show-overflow-tooltip="true"
        :key="index"
        :label="item.label"
        align="center"
        :prop="item.value"
 
        :filter-multiple="true"
        :filters="filterData(item)"
        :filter-method="filterTag"
        >
      </el-table-column>
    </template>
  </el-table>

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