如何在Element UI中的Table组件中实现数据筛选功能，并获取筛选后实际显示的数据？

在Element UI的Table组件中实现数据筛选功能通常使用`props.filter`和`props.sort`，这两个特性允许你在表格上添加动态过滤和排序。这里是一个基本的例子：

1. 首先，在Vue组件中导入所需的`el-table-column`和`el-table-filter`组件：

<template>
  <el-table :data="filteredData" v-bind:filters="filters">
    <!-- ... -->
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="columnToFilter" label="Column to Filter" :filters="filters" align="center"></el-table-column>
    <!-- ... -->
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn, ElTableFilter } from "element-plus";

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElTableFilter
  },
  // ...
</script>

这里的`filters`属性应该是一个对象，键是你想要过滤的列名，值是一个对象数组，每个对象有两个属性：`value`表示输入的值，`method`是一个自定义的方法用于处理筛选逻辑。

2. 然后，在组件内部管理筛选状态和数据：

export default {
  data() {
    return {
      filters: [{ value: "", method: this.handleFilter }],
      columns: [
        { property: "propertyToDisplay", label: "Display Property" },
        // ...
      ],
      filteredData: this.data // 假设data是从服务器获取到的原始数据
    };
  },
  methods: {
    handleFilter(value, column) {
      this.filteredData = this.data.filter(item => item[column.property] === value);
    }
    //...
  }
};

当用户在筛选框输入时，`handleFilter`方法会被调用，它会更新`filteredData`数组，只保留满足条件的行。