vue3 table 分页+模糊查询

Vue3中，处理Table组件的分页和模糊查询通常会结合Vuex管理状态、Element UI库的el-table和el-pagination组件以及axios或其他HTTP库来进行。以下是一个简单的步骤：

1. 安装依赖：首先确保已经安装了Vue、Element UI和axios等必要的库。

npm install vue@next element-ui axios

2. 创建store：在Vuex store中管理当前页数、每页显示的数量以及查询条件。

// store/index.js
import { createStore } from 'vuex'
export default createStore({
  state: {
    currentPage: 1,
    pageSize: 10,
    searchKeyword: '',
  },
  mutations: {
    // 更新state的方法
    updatePage(state, page) {
      state.currentPage = page;
    },
    setSearchKeyword(state, keyword) {
      state.searchKeyword = keyword;
    },
  },
});

3. 使用组件：在Vue组件中，你可以通过mapState和mapDispatchToProps从store获取数据，并使用el-table和el-pagination展示表格并处理分页和搜索事件。

<template>
  <div>
    <el-pagination :total="totalCount" :page-size="pageSize" current-page.sync="currentPage" @current-change="handleCurrentChange"></el-pagination>
    <el-input v-model="searchKeyword" placeholder="输入关键词" @input="handleSearch"></el-input>
    <el-table :data="filteredData" style="width: 100%">
      <!-- 表格列 -->
    </el-table>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["currentPage", "pageSize", "searchKeyword"]),
    totalCount() {
      return this.$store.state.totalCount; // 假设从API获取总记录数
    },
    filteredData() {
      let data = this.dataSource.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
      return data.filter(item => item.name.includes(this.searchKeyword));
    },
  },
  methods: {
    handleCurrentChange(page) {
      this.$store.commit("updatePage", page);
    },
    handleSearch(e) {
      this.$store.commit("setSearchKeyword", e.target.value);
    },
    ...mapActions(["fetchData"]), // 假设有一个fetchData方法从API获取数据
    fetchData() {
      this.fetchDataFromAPI().then(data => {
        // 更新store的状态，例如数据总数
        this.$store.dispatch("setTotalCount", data.length);
        this.dataSource = data; // 这里假设dataSource是原始数据源
      });
    },
  },
};
</script>

4. API请求：`fetchDataFromAPI`函数从服务器获取数据，可以根据查询条件进行过滤。

注意这只是一个基础示例，实际应用中可能还需要处理更多细节，如错误处理、状态更新动画等。同时，你需要根据实际需求调整API调用、数据结构和表头内容。