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

Element UI中的Table组件提供了一种便捷的方式来实现表格的筛选功能，通常通过`el-table-column`的`filters`选项来配置。你可以设置一个包含各种选项的数组，用户可以根据需要选择筛选条件。例如：

<el-table :data="tableData" :filter-method="filterMethod">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="name" label="姓名" filters v-model="filters.name">
    <template slot-scope="{ $index, column, value }">
      <el-option
        :key="$index"
        :label="column.label + ' (' + value + ')'"
        :value="value"
      ></el-option>
    </template>
  </el-table-column>
  <!-- 其他列... -->
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      filters: {}, // 筛选条件
      filterMethod: function (column, value) {
        if (!column.filters || !column.filters.length) return;
        return this.tableData.filter(row => row[column.prop].toString().includes(value));
      },
    };
  },
};
</script>

在这个例子中，`filterMethod`函数会在用户选择筛选条件后被调用，它会遍历表格数据并返回筛选后的结果。`v-model`绑定到`filters`属性则实现了筛选条件的实时更新。

为了获取筛选后的数量，你可以添加一个计算属性来跟踪这个值：

computed: {
  filteredCount() {
    return this.tableData.filter(this.filterMethod).length;
  },
},

然后在模板中显示筛选后的数量：

<p>筛选后数量：{{ filteredCount }}</p>