场景
点击过滤条件，根据过滤条件请求接口，刷新列表
如果表格没有分页，要不要重新请求接口必要性不大，如果存在分页，则需要调用接口
注意：直接看方法二，直接看方法二，直接看方法二，
方法一存在bug（当每个筛选条件的返回结果均不为空时有效，虽然使用了防抖，但由于防抖时间设置的影响，可能会存在多次请求接口的问题，当点击某个筛选条件返回结果为空时，再点击其他的，这个时候是不是有效就得看造化了。。。）
方法一：使用:filter-method="filterHandler"
html（部分主要代码）
<el-table-column prop="from" label="系统创建属性" :filters="[ { text: '全部', value: '全部' }, { text: '是', value: '是' }, { text: '否', value: '否' }, ]" :filter-method="filterHandler"//筛选函数 filter-placement="bottom-end" //筛选框的位置 :filter-multiple="false" //是否多选？false代表否，默认不写为true ></el-table-column>
js（过滤函数）
// 过滤 async filterHandler(value) { if (value === '是') { this.value = 1; } else if (value === '否') { this.value = 2; } else { this.value = 0; } },
js（监听value的变化）
watch: { value: { handler(newValue, oldValue) { if (newValue != oldValue) { this.refreshSystemAttribute();//value改变时刷新列表,即重新请求接口 this.setOneGet(); // 防抖函数 } }, deep: true, }, },
安装loadsh
npm i --save lodash
js（防抖函数）
created() { let _ = require('lodash'); // 引用 // 此处refreshSystemAttribute是在methods中定义的函数， 500单位为毫秒，延迟500毫秒再调用 this.setOneGet = _.debounce(this.refreshSystemAttribute, 500); },
js（请求接口主要函数）
let res = await this.$api.Metadata.getSystemAttributeList({ page: page, limit: page_size, search: this.search, from: this.value, isFilter: this.isFilter });
方法二：使用@filter-change="change"
使用场景：当表格中只有单个筛选项时
html（部分主要代码）
<el-table :data="userTagList" border style="width: 100%" @selection-change="handleSelectionChange" @filter-change="change" > <el-table-column prop="status" label="状态" :filters="[ { text: '全部', value: '全部' }, { text: '未添加', value: '未添加' }, { text: '已添加', value: '已添加' }, { text: '忽略', value: '忽略' }, ]" filter-placement="bottom-end" :filter-multiple="false" ></el-table-column> </el-table>
js（过滤函数）
// 过滤 change(value) { for (let key in value) { if (value[key][0] === '未添加') { this.status = 2; } else if (value[key][0] === '已添加') { this.status = 1; } else if (value[key][0] === '忽略') { this.status = 3; } else if (value[key][0] === '全部') { this.status = 4; } } },
js（监听status的变化）
watch: { status: { handler(newValue, oldValue) { if (newValue != oldValue) { this.refreshUserTagList();//status改变时刷新列表,即重新请求接口 } }, deep: true, }, },
js（请求接口主要函数）
let res = await this.$api.KnowledgeMap.getUserTagList({ page: page, limit: page_size, search: this.search, status: this.status, });
使用场景：当表格中有多个筛选项时
html（部分主要代码）
<el-table :data="systemTagList" border style="width: 100%" @selection-change="handleSelectionChange" @filter-change="change" > <el-table-column prop="from" label="系统创建属性" :filters="[ { text: '全部', value: '全部' }, { text: '是', value: '是' }, { text: '否', value: '否' }, ]" filter-placement="bottom-end" :filter-multiple="false" :column-key="one" //特殊标识，必须存在，名字随意 ></el-table-column> <el-table-column prop="isFilter" label="筛选维度" :filters="[ { text: '全部', value: '全部' }, { text: '是', value: '是' }, { text: '否', value: '否' }, ]" filter-placement="bottom-end" :filter-multiple="false" :column-key="two" //特殊标识，必须存在，名字随意 ></el-table-column> </el-table>
js
data() { return { one: 'one', //名字随意 two: 'two', //名字随意
value: 0, isFilter: 2, }; },
js（过滤函数）
change(value) { if (value.one) { if (value.one[0] === '是') { this.value = 1; } else if (value.one[0] === '否') { this.value = 2; } else { this.value = 0; } } else { if (value.two[0] === '是') { this.isFilter = 1; } else if (value.two[0] === '否') { this.isFilter = 0; } else { this.isFilter = 2; } } },
js（监听value、isFilter的变化）
watch: { value: { handler(newValue, oldValue) { if (newValue != oldValue) { this.refreshgetAttributeList(); } }, deep: true, }, isFilter: { handler(newValue, oldValue) { if (newValue != oldValue) { this.refreshgetAttributeList(); } }, deep: true, }, },
js（请求接口主要函数）
let res = await this.$api.Metadata.getSystemAttributeList({ page: page, limit: page_size, search: this.search, groupId: this.id, from: this.value, isFilter: this.isFilter, });
总结
方法2更好，不需要防抖，每次变化时只会请求一次
