vue3项目 需要记录不同页面中数据表格的筛选项以及页码

对于记录不同页面中数据表格的筛选项以及页码，你可以考虑使用 Vuex 来进行状态管理。具体做法如下：

1. 在 Vuex 中定义一个对象用来存储不同页面中数据表格的筛选项以及页码，可以取名为 tableState。

2. 在每个页面的组件中，通过 computed 计算属性来获取 tableState 中的数据，然后将其传递给数据表格组件。

3. 在每个页面的组件中，通过监听数据表格组件的筛选和翻页事件，更新 tableState 中的数据。

4. 如果需要持久化存储 tableState 中的数据，可以考虑使用 localStorage 或者 sessionStorage。

下面是一个简单的示例代码：

// store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 存储不同页面中数据表格的筛选项以及页码
    tableState: {}
  },
  mutations: {
    // 更新某个页面的筛选项和页码
    updateTableState (state, { page, filters, currentPage }) {
      state.tableState[page] = {
        filters,
        currentPage
      }
    }
  }
})

// Page1.vue

<template>
  <div>
    <data-table :filters="tableFilters" :currentPage="tableCurrentPage" @filter-change="handleFilterChange" @page-change="handlePageChange" />
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    computed: {
      ...mapState({
        tableState: state => state.tableState
      }),
      tableFilters () {
        return this.tableState['page1'] ? this.tableState['page1'].filters : {}
      },
      tableCurrentPage () {
        return this.tableState['page1'] ? this.tableState['page1'].currentPage : 1
      }
    },
    methods: {
      handleFilterChange (filters) {
        this.$store.commit('updateTableState', { page: 'page1', filters, currentPage: 1 })
      },
      handlePageChange (currentPage) {
        this.$store.commit('updateTableState', { page: 'page1', filters: this.tableFilters, currentPage })
      }
    }
  }
</script>

// Page2.vue

<template>
  <div>
    <data-table :filters="tableFilters" :currentPage="tableCurrentPage" @filter-change="handleFilterChange" @page-change="handlePageChange" />
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    computed: {
      ...mapState({
        tableState: state => state.tableState
      }),
      tableFilters () {
        return this.tableState['page2'] ? this.tableState['page2'].filters : {}
      },
      tableCurrentPage () {
        return this.tableState['page2'] ? this.tableState['page2'].currentPage : 1
      }
    },
    methods: {
      handleFilterChange (filters) {
        this.$store.commit('updateTableState', { page: 'page2', filters, currentPage: 1 })
      },
      handlePageChange (currentPage) {
        this.$store.commit('updateTableState', { page: 'page2', filters: this.tableFilters, currentPage })
      }
    }
  }
</script>

// DataTable.vue

<template>
  <div>
    <!-- 筛选输入框 -->
    <input type="text" v-model="filterInput" @keyup.enter="handleFilterChange">

    <!-- 表格数据 -->

    <!-- 翻页器 -->
    <div>
      <button @click="handlePageChange(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
      <button @click="handlePageChange(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      filters: {
        type: Object,
        default: () => ({})
      },
      currentPage: {
        type: Number,
        default: 1
      }
    },
    data () {
      return {
        filterInput: ''
      }
    },
    computed: {
      // 根据筛选条件和当前页码计算出总页数
      totalPages () {
        // ...
      }
    },
    methods: {
      handleFilterChange () {
        this.$emit('filter-change', { ...this.filters, keyword: this.filterInput })
      },
      handlePageChange (page) {
        this.$emit('page-change', page)
      }
    }
  }
</script>