element-ui plus 中 filter-method 函数多次触发问题解决

前情提要

点进这个文章的小伙伴，应该都是为了解决一个需求，把原本的前端过滤改为后端过滤，但是将filter-method修改为后端取数据后，发现其触发了很多次。博主也是在修改表格过滤时用到了这个坑，本篇文章为大家解决一下，具体的演示示例在最下方，小伙伴可以直接复制查看

filter-method为什么会触发多次

其实很简单，在官方文档中便有提示，filter-method 方法本质是通过遍历行来实现的筛选，相当于会对每一行调用函数进行判断，所以当我们调整成取接口逻辑后，一次筛选就会触发多次

使用 filter-change 函数解决

知道了原因，我们就要选择正确的方法解决，在官方文档中我们找到 filter-change 函数，该函数是通过一次筛选整个表格实现过滤，只会触发1次，刚好满足我们的需求

接着，代码中原本的 filter-method 函数删除，加上 column-key 属性来绑定字段，因为本示例是单个条件筛选，我们把 filter-multiple 属性设置为 false ，最后在el-table 标签上添加新的函数 filter-change，即完成了筛选函数的替换

  <el-table :data="tableData" @filter-change="filterHandler">
      <el-table-column prop="type" column-key="type" label="类型" :filters="typeFilters" :filter-multiple="false">
        <template #default="scope">
          <el-tag v-if="scope.row.type===1" type="info">类型1</el-tag>
          <el-tag v-else type="primary">类型2</el-tag>
        </template>
      </el-table-column>
  </el-table>

完整演示示例

<script setup lang="ts">
import {ref} from 'vue'
const tableData = ref([])
const query = ref({type:''})
const typeFilters =  [{ value: 1, text: '类型1' },{ value: 2, text: '类型2' }]
const getTableData = () => {
  // 这里改成取后台接口的逻辑
  const source = [{type:1},{type:2},{type:1}]
  const data = []
  source.forEach(row=>{
    if(query.value.type && query.value.type!==row.type){
        return    
    }
    data.push(row)
  })
  tableData.value = data
}
getTableData()
const filterHandler = (column)=>{
  for(const key in column){
    query.value[key] = column[key][0]
  }
  getTableData()
}
</script>

<template>
  <el-table :data="tableData" @filter-change="filterHandler">
      <el-table-column prop="type" column-key="type" label="类型" :filters="typeFilters" :filter-multiple="false">
        <template #default="scope">
          <el-tag v-if="scope.row.type===1" type="info">类型1</el-tag>
          <el-tag v-else type="primary">类型2</el-tag>
        </template>
      </el-table-column>
  </el-table>
</template>