在 Vue 3 中使用 Element Plus 的 El-Table 组件进行分页情况下的全局数据筛选

在 Vue 3 中，使用 Element Plus 的 `El-Table` 组件进行分页并且添加全局数据筛选功能，通常需要结合 Vue Router 和Vuex来管理状态。以下是步骤：

1. **安装依赖**:
首先，在项目中安装 `element-plus` 和 `vue-router` 如果还没安装：

   npm install element-plus vue-router vuex

2. **配置 Element Plus**:
在 main.js 或者你项目的入口文件中，引入并初始化 Element Plus 组件：

   import { createApp } from 'vue'
   import ElementPlus from 'element-plus'
   import App from './App.vue'

   createApp(App)
     .use(ElementPlus)
     .mount('#app')

3. **Vue Router 设置**:
创建路由，并将需要分页和筛选的数据放在 Vuex store 中，比如 state 中有一个 `tableData` 数组和 `currentPage` 变量。

4. **Vuex 容器组件**:
创建一个容器组件，如 `DataTable.vue`，在这个组件里操作 Vuex 存储，获取和设置数据：

   <script setup>
   import { ref, computed } from 'vue'
   import { getters, mutations } from '@/store'
   
   const tableData = ref([])
   const currentPage = ref(1)

   const handlePaginationChange = (page) => {
     mutations.fetchData(page)
   }
   
   const filteredData = computed(() => {
     // 根据当前过滤条件返回筛选后的数据
     return tableData.value.filter(...yourFilterConditions)
   })
   </script>

   <el-table :data="filteredData" ...></el-table>
   <el-pagination v-model="currentPage" :total="totalPages" @current-change="handlePaginationChange"></el-pagination>

5. **Vuex mutations**:
在 Vuex actions 中编写 `fetchData` 函数，用于从服务器获取数据并更新到 store:

   export const fetchData = async ({ commit, state }) => {
     const response = await fetch('your-api-url', { params: { page: state.currentPage, filter: yourGlobalFilter } })
     const data = await response.json()
     commit('setData', data.data)
   }

   export const setData = (data) => {
     commit('updateTableData', data)
   }

6. **Vuex getters**:
在 store 中创建 getters 来获取处理过的数据供组件使用:

   export const getData = (state) => {
     // 这里可以对原始数据进行分页、排序等预处理
     return state.tableData.slice((state.currentPage - 1) * pageSize, state.currentPage * pageSize)
   }
   
   export const totalPages = (state) => Math.ceil(state.total / pageSize)

7. **应用到路由视图**:
在路由对应的组件中，通过 `<router-view>` 渲染 `DataTable.vue`。