element-plus表格使用:filter-method过滤导致出现无数据

前端表格进行过滤

背景介绍：我们表格的过滤是后端做的

但是不知道为啥，在进行迁移的时候

表格过滤写上了 @filter-change="handleFilterChange"变成了前端过滤，

导致服务端返回数据后，表格显示的却是：暂无数据解决办法：去掉 @filter-change="handleFilterChange" 不要变成前端过滤

ini 复制代码

<template>
  <div>
    <el-button type="primary" @click="setTableData">设置数据</el-button>
     <el-table
          ref="normalTable"
          :data="tableData"  
          style="width: 100%" 
          max-height="440px"
          @filter-change="handleFilterChange"
        >
          <el-table-column
            v-for="(column, index) in tableDataOption"
            :key="index"
            :prop="column.prop"
            :label="column.label"
            :min-width="120"
            :column-key="column.prop"
            :filters="column.filter ? column.filterOptions : null"
            :filter-multiple=" false"
            :filter-method="column.filter ? filterHandler : null"
          />
        </el-table>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';


let tableData = ref<any[]>([])
const tableDataOption = ref<any[]>([])
// 过滤方法
const filterHandler = (value: any, row: any, column: any) => {
  const property = column.property
  // 过滤方法，返回 true 表示保留该行，否则不保留
  return  row[property] === value
}
function setTableData(){
  setTimeout(()=>{
      tableDataOption.value= [ 
        { "prop": "bucket",
         "label": "桶名称", 
         "filter": true, 
          filterOptions: [
            { "text": "A1", "value": "A1" },
            { "text": "B1", "value": "002" }
          ] 
       }, 
        { 
          "prop": "projectID", 
          "label": "企业项目", 
          "filter": false, 
          filterOptions: [ ] 
        } 
      ]
    tableData.value= [
      {
        "bucket": "A1",
        "childInfo": [],
        "projectID": "default",
        "id": "001",
        "name": "bucket-1e1f",
      },
      {
        "bucket": "B1",
        "childInfo": [],
        "projectID": "default",
        "id": "bucket-272e",
        "name": "bucket-272e",
      },
    ]
  },1300)
}
function handleFilterChange(newFilters: Record<string, string[]>) {
  console.log(newFilters)
}

</script>

<style scoped>

</style>

filters 的介绍

filters 表格列中数据过滤的选项,数组格式。

数组中的元素需要有 text 和 value 属性。

filter-method 是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。

该方法返回 true 表示保留该行，否则不保留。

使用 filter-method 进行过滤需要注意的点

filter-method 进行过滤是纯前端完成的。

如果是后端进行过滤，就不要使用 filter-method了，会导致表格出现无数据的情况。

该方法返回 true 表示保留该行，否则不保留。

filter-change="handleFilterChange"

当表格的过滤条件发生变化的时候会触发该事件 filter-change

比如: 使用 filter-method 方法进行过滤后，就会触发这个方法。

设置过滤后，重新设置表格中的数据也会自动展示过滤后的数据

表格最初有10条数据，我们使用过滤filter-change后，展示了1条数据；

就算接口返回来8条数据，表格也只会展示1条数据（会自动过滤，只展示符合条件的数据）