ElementPlus的Table搜索功能（setup+ts）

<template>
    <el-table
      :data="filterTableData"
    >
      <!-- 姓名 -->
      <el-table-column prop="name" label="姓名" width="150" />

      <!-- 搜索框 -->
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" placeholder="输入关键字" />
        </template>
      </el-table-column>
      <el-table-column align="left">
        <template #header>
          <el-button class="searchButton" @Click="changeData()">搜索</el-button>
        </template>
      </el-table-column>
    </el-table>

</template>

<script lang="ts" setup>
import {ref } from "vue";

//从后台获取的数据
let tableData: any = [];

// 绑定的表格数据
let filterTableData = ref();

// 搜索框中的数据
const search = ref("");

//把接口写上，里面是搜索内容的数据类型
interface User {
  name: string;
}

//点击按钮，刷新表格数据
const changeData = () => {
  getTableData();
};

// 获取table数据，并过滤
const getTableData = () => {
  getVolunteerList().then((res) => {
    tableData = res.data;
    filterTableData.value = tableData.filter(
      (data: User) =>
        !search.value ||
        data.name.toLowerCase().includes(search.value.toLowerCase())
    );
  });
};
getTableData();
</script>

在ElementPlus官网给的样例中是这样的：

const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )

因为我需要获取后台数据所以我得在外边使用

const filterTableData = ref();

然后在里面这样写

const getTableData = () => {
  getVolunteerList().then((res) => {
    tableData = res.data;
 filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)
  });
};

想要在表格中正确显示数据必须是filterTableData.value =。。。。。。，但是这样写就会报错，无奈选择了通过点击按钮来刷新数据的方式。如果有更好的方法欢迎指导！

附官网：Table 表格 | Element Plus