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

一天只码五十行

已于 2024-01-21 20:32:30 修改

阅读量1.8k

点赞数

文章标签： vue.js typescript 前端

于 2023-03-26 13:32:35 首次发布

本文链接：https://blog.csdn.net/qq_45820271/article/details/129778304

版权

<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,computed } from "vue";
// 这个是获取数据的函数
import { getVolunteerList } from "@/api/api";
//从后台获取的数据
let tableData: any = [];

// 绑定的表格数据
const filterTableData = computed(() => {
  return tableData.filter(
    (data: User) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  );
});
// 搜索框中的数据
const search = ref("");

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

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

// 获取table数据
const getTableData = () => {
  getVolunteerList().then((res) => {
    tableData = res.data;
  });
};
getTableData();
</script>

附官网：Table 表格 | Element Plus