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

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

完整代码

<template>
  <div id="app">
    <!-- 表格部分 -->
    <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>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      tableData: [
        { name: "zml", age: 18, sex: "男" },
        { name: "zml", age: 18, sex: "男" },
        { name: "zml", age: 18, sex: "男" },
        { name: "zml", age: 18, sex: "男" },
      ],
      dataList: [
        {
          label: "姓名",
          value: "name",
        },
        {
          label: "年龄",
          value: "age",
        },
        {
          label: "性别",
          value: "sex",
        },
      ],
    };
  },
  //计算属性
  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: {
    //返回符合条件的数据
    // 参数分别是：选中的条件 、当前行 、当前列
    filterTag(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    // 数组对象去重
    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;
    },
    _filterChange() {
      this.totalSize = this.$refs.table.tableData.length;
      console.log(this.totalSize);
    },
  },
};
</script>