对表格进行筛选，可快速查找到自己想看的数据
数据过滤的逻辑有两个方向，以下针对两个方向进行说明：
前端过滤
<template><div><el-table :data="tableData" style="width: 100%"><el-table-columnprop="name"label="姓名":filters="nameFilters":filter-method="filterName":filter-multiple="false"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [],nameFilters: [{ text: '张三', value: '10001' }], // 存储姓名筛选选项};},mounted() {// 初始化数据this.fetchData();// 获取姓名筛选选项this.fetchNameFilters();},methods: {// 从接口获取表格数据async fetchData(filter = {}) {},// 筛选姓名的方法filterName(value, row, column) {console.log(value, row, column)const property = column['property'];return row[property] === value;}}
};
</script>
前端筛选主要用到的有两个属性， filters ， filter-method
filters 存储数据的筛选的选项
filter-multiple 数据过滤的选项是否多选
filter-method 方法会遍历每一行数据，有多少条数据就会执行多少次，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
- 前端过滤，其逻辑就是通过 filter-method 方法，遍历每一条数据，看看每条数据是否符合筛选，如果为
true，则数据显示。就这么简单。 - 单选筛选是每条数据都执行一次，多选筛选，是每条都会执行多次，然后都去匹配筛选项，看看是否能匹配。
后端过滤
<template><el-table :data="list" class="border-gray" @filter-change="changefilter"><el-table-column prop="islock" label="门店状态":filters=islockOptions :filter-multiple="false" column-key="islock"><template slot-scope="scope"><el-tag type="success" v-if="scope.row.islock == 0">启用</el-tag><el-tag type="danger" v-if="scope.row.islock == 1">禁用</el-tag></template></el-table-column><el-table-column prop="hangye" label="行业" :filters=hangyeOptions column-key="hangye"></el-table-column></el-table>
</template><script>export default {data() {return {list: [],fliterData:{"islock":"","hangye ":"","teamscale":""},islockOptions: [{ text: '启用', value: '0' }, { text: '禁用', value: '1' }],hangyeOptions: [],};},methods: {getList(){getShopList({islock: this.fliterData.islock,hangye: this.fliterData.hangye,teamscale: this.fliterData.teamscale,}).then(response => {this.list = response.data.list;this.pageParam.total = response.data.total;this.loading = false;});},// 过滤changefilter(filters) {if (filters.islock) {this.fliterData.islock = filters.islock[0];}if (filters.hangye) {this.fliterData.hangye = filters.hangye.join(",");}if (filters.teamscale) {this.fliterData.teamscale = filters.teamscale.join(",");}this.getList();},}}
</script>后端筛选其实就是将参数传到接口，通过后端的接口进行筛选
主要用到的有两个属性， filters ， column-key, filter-change
filters 存储数据的筛选的选项
filter-multiple 数据过滤的选项是否多选
column-key 设置筛选参数的字段名，filter-change 返回的key不是自动生成的而是设置的column-key的值
filter-change 方法是table 的属性，只会执行一次，当表格的筛选条件发生变化的时候会触发该事件。
- 后端筛选 就是 通过 触发 filter-change 事件，将筛选参数记录下来，然后一起传到后端接口，进行接口筛选。
常见问题：
-
column-key 参数不设置，我打印下就清楚了。
不设置 column-key 的参数，这时你知道你搜索的是哪个参数吗，不知道。
设置后的情况，这时是不是一目了然了，知道是筛选哪个字段。
