element ui中表格过滤filters请求后台接口

场景

点击过滤条件，根据过滤条件请求接口，刷新列表

如果表格没有分页，要不要重新请求接口必要性不大，如果存在分页，则需要调用接口

注意：直接看方法二，直接看方法二，直接看方法二，

方法一存在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更好，不需要防抖，每次变化时只会请求一次