Vue Ant Desigin table组件结合筛选条件使用分页，跳转编辑页返回依然保存筛选条件

思路：
在获取列表数据时把筛选条件存入缓存，在页面created时，判断是否有缓存，有则保留之前的筛选条件；
但是这样存在一个小bug，因为不止一个列表页，其他页面也是如此的，所以在页面离开时，使用destroyed生命周期清除缓存，再进入其他模块时，没有缓存就赋值当前页面的筛选条件

代码实现：

//条件筛选
 <a-button type='primary' @click='searchList'>查询</a-button>
 <a-button  @click='resetList'>重置</a-button>

<a-table
            ref='TableInfo'
            :columns='columns'
            :dataSource='dataSource'
            :loading='loading'
            :pagination='pagination' //使用分页器
            :rowKey='(record,index)=>{return index}'
            :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
            :scroll='{x: 1200,y:540}'
            bordered
            @change='handleTableChange' //分页器翻页
            >
</a-table>

//分页器参数
pagination: {
        total: 0,
        showSizeChanger:true,
        current: 1,
        pageSize: 15, //每页中显示15条数据
        pageSizeOptions: ['15', '30', '45', '60'], // 每页数量选项
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
},
//筛选条件
      queryParam: {
        page: 1,
        pagesize: 15,
        goods_code: '',
        goods_name: '',
        type: 'index',
        status: 0,
        gc_id: ''
},

created() {
    let currentParam = this.queryParam //当前页的筛选条件
    setTimeout(()=>{  //因为离开页面清除缓存需要时间，所以加个1秒的延时器
      //判断是否有之前的查询条件
      let newParam = JSON.parse(sessionStorage.getItem('queryParam'))
      if (newParam != null) {
        this.queryParam = newParam
      }else {
        this.queryParam = currentParam
      }
      this.dataSourceList()
    },100)
  },

methods: {
   //请求接口获取数据
    dataSourceList() {
      let newParam = JSON.parse(sessionStorage.getItem('queryParam'))
      sessionStorage.setItem('queryParam', JSON.stringify(this.queryParam))
      //本页查询条件和缓存里的合并，得到最新的筛选条件
      const argument = { ...newParam, ...this.queryParam };
      this.loading = true
      getGoodsList(argument).then((r) => {
        const pagination = { ...this.pagination };
        if (r.code == 200) {
          this.dataSource = r.data.data
          // 接收Number型，如果接口返回的count是字符串，除以1
          pagination.total = r.data.count / 1;
          this.pagination = pagination;
          this.loading = false
        }
      })
    },
    //筛选事件
    searchList() {
      this.pagination.current = 1
      this.pagination.pageSize = 15
      this.queryParam.page = 1
      this.dataSourceList()
    },
    //初始化筛选条件
    resetList() {
      this.queryParam = {
        page: 1,
        pagesize: 15,
        goods_code: '',
        goods_name: '',
        type: 'index',
        status: 0,
        gc_id: ''
      }
      this.pagination.current = 1
      this.selectedRowKeys = []//取消表格选中
      this.expandedKeys = [] //取消选中状态
      this.dataSourceList()
    },
    //页码翻页
    handleTableChange(pagination) {
      this.queryParam.page = pagination.current
      this.queryParam.pagesize = pagination.pageSize
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.dataSourceList()
    },
}

// 离开当前页，清除缓存
destroyed() {
    sessionStorage.removeItem('queryParam');
},

ps：还可以用vuex来实现这个功能
检验一下效果吧~有问题留言一起讨论