在 ElementUI 的 el-table 组件中，提供了一个 el-table-column 组件的 filters 属性，可以用于对表格数据进行筛选操作。通过设置 filters 属性可以在表头中添加筛选菜单，用户可以通过选择菜单中的选项来过滤表格数据。 具体来说，可以按照以下步骤使用 el-table-column 组件实现筛选功能：

在 el-table 组件中指定表格数据。

在要进行筛选的列上加入 el-table-column 组件，并设置 filters 和 filter-method 属性。

其中，prop 属性表示要显示的表格数据的属性名，label 属性表示要显示的表格列名。此外，filters 属性是一个数组，表示筛选菜单的选项列表。例如：[{ text: ‘计算机科学’, value: ‘cs’ }, { text: ‘电子工程’, value: ‘ee’ }] 表示有两个选项：“计算机科学”和“电子工程”，对应的值分别为“cs”和“ee”。filter-method 属性则是一个函数，用于根据用户选择的筛选条件，过滤表格数据。例如： data() { return { filters: [ { text: ‘计算机科学’, value: ‘cs’ }, { text: ‘电子工程’, value: ‘ee’ } ], tableData: [ { id: 1, course: ‘计算机科学’, teacher: ‘张三’ }, { id: 2, course: ‘电子工程’, teacher: ‘李四’ }, { id: 3, course: ‘计算机科学’, teacher: ‘王五’ }, { id: 4, course: ‘电子工程’, teacher: ‘赵六’ } ] } }, methods: { filterMethod(value, row) { return row.course === value; } }

在上面的代码中，我们在 data 函数中定义了筛选菜单和表格数据，当用户选择某个筛选菜单项后，filterMethod 函数会根据选项的值对表格数据进行过滤，只保留符合条件的行。

手动触发表格数据的更新。

当用户选择了筛选菜单项时，需要手动触发表格数据的更新，以便表格能够根据筛选条件重新渲染。可以通过以下方式实现更新：

computed: { filteredTableData() { const { filterValue, filterKey } = this; if (!filterValue) { // 如果用户没有选择任何筛选条件，直接返回原始表格数据 return this.tableData; } // 使用 filter 方法过滤表格数据 return this.tableData.filter((row) => row[filterKey] === filterValue); } }, methods: { // 用户选择筛选条件时触发更新 handleFilter(value, key) { this.filterValue = value; this.filterKey = key; } }

在上面的代码中，我们通过 computed 计算属性来根据用户选择的筛选条件过滤表格数据。同时，在 handleFilter 方法中，当用户选择筛选条件时，手动更新了 filterValue 和 filterKey 变量。这会触发 computed 计算属性的重新计算，从而实现表格数据的即时更新。 通过以上步骤，就可以在 ElementUI 的 el-table 组件中实现筛选功能。

在 ElementUI 的 el-table 组件中，el-table-column 组件的 filters 属性确实是用于定义筛选菜单的选项列表。该筛选菜单提供了一个下拉菜单，每个选项代表着一个筛选条件。用户可以通过选择菜单中的某个选项，来过滤表格数据。 不过，在 ElementUI 的 el-table 组件中，还有一个 filter-method 属性，可以用于自定义筛选方法。该属性可以绑定一个函数，用于根据用户选择的筛选条件过滤表格数据。该函数接收两个参数，第一个参数表示当前选中的筛选条件的值，第二个参数是当前遍历的行数据。函数应该返回一个布尔值，决定该行数据是否应该保留在表格中。 下面是类似上面的例子，但用了 filter-method 实现筛选的示例代码：

data() { return { filters: [ { text: ‘计算机科学’, value: ‘cs’ }, { text: ‘电子工程’, value: ‘ee’ } ], tableData: [ { id: 1, course: ‘计算机科学’, teacher: ‘张三’ }, { id: 2, course: ‘电子工程’, teacher: ‘李四’ }, { id: 3, course: ‘计算机科学’, teacher: ‘王五’ }, { id: 4, course: ‘电子工程’, teacher: ‘赵六’ } ] } }, methods: { filterMethod(value, row) { return row.course === value; } }

在上面的代码中，我们使用 filter-method 属性将 filterMethod 函数绑定到 el-table-column 组件上。该函数用于对每行数据进行过滤，只保留符号条件的行数据。与 filters 不同的是，filter-method 能够自定义筛选方法，可以更加灵活地实现需求。

在 ElementUI 的 el-table 中，除了使用筛选菜单进行筛选，还可以使用 el-input 组件提供的输入框来进行筛选。这个需要我们自己实现，可以通过监听 el-input 的 input 事件，根据用户输入的值来过滤表格数据。 以下是一个示例代码，使用 el-input 组件绑定 input 事件，调用 filterTableData 方法来实现筛选功能：

在上述代码中，我们使用 el-input 组件提供的输入框和 v-model 进行双向数据绑定，监听 input 事件调用 filterTableData 方法。 在 filterTableData 方法中，我们使用 $refs 来获取表格组件的引用（引用名为 table），调用其 filter 方法来过滤表格数据。其中，方法的第一个参数 search 表示用户在输入框中输入的值，第二个参数 course 表示要筛选的表格列的属性名。值得注意的是，在调用 filter 方法时，我们使用 $nextTick 来确保在过滤表格数据之前渲染出所有的表格行。

参考链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。