el-table如何实现筛选功能，以及filters,filter_method详解

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

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

<el-table :data=“tableData”>
<!-- 表格列定义 -->
</el-table>

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

<el-table :data=“tableData”>
<el-table-column prop=“course” label=“课程名称” :filters=“filters” :filter-method=“filterMethod”>
</el-table-column>
<!-- 其他表格列定义 -->
</el-table>

其中，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 函数会根据选项的值对表格数据进行过滤，只保留符合条件的行。

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

当用户选择了筛选菜单项时，需要手动触发表格数据的更新，以便表格能够根据筛选条件重新渲染。可以通过以下方式实现更新：
<el-table :data=“filteredTableData”>
<!-- 表格列定义 -->
</el-table>

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 实现筛选的示例代码：
<el-table :data=“tableData”>
<el-table-column prop=“course” label=“课程名称” :filters=“filters” :filter-method=“filterMethod”>
</el-table-column>
<!-- 其他表格列定义 -->
</el-table>

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 方法来实现筛选功能：
<template>
<div>
<el-input placeholder=“请输入课程名称” v-model=“searchValue” @input=“filterTableData”></el-input>
<el-table :data=“tableData”>
<el-table-column prop=“course” label=“课程名称”></el-table-column>
<el-table-column prop=“teacher” label=“教师姓名”></el-table-column>
</el-table>
</div>
</template>

<script>
export default {
data() {
return {
searchValue: ‘’,
tableData: [
{ id: 1, course: ‘计算机科学’, teacher: ‘张三’ },
{ id: 2, course: ‘电子工程’, teacher: ‘李四’ },
{ id: 3, course: ‘计算机科学’, teacher: ‘王五’ },
{ id: 4, course: ‘电子工程’, teacher: ‘赵六’ }
]
}
},
methods: {
filterTableData() {
this.KaTeX parse error: Expected 'EOF', got '&' at position 14: nextTick(() =&̲gt; { t…refs.table.filter(search, ‘course’);
});
}
}
}
</script>

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