解决antd table组件翻页后selectionRows清空的问题

使用vuex存储数据

export const table = {
  namespaced: true,
  state: {
    selectedRowKeys: [],  //当前选中对象主键
 selectionRows: [],  //当前选中对象
 allRows: new Map //去重后的全局对象
 },
  mutations: {
    //清空
 clearSelections(state) {
      state.selectedRowKeys = []
      state.selectionRows = []
      state.allRows = new Map
 },
    //新增selectedRowKeys
 updateRecords(state, vuexData) {
      state.selectedRowKeys = vuexData.selectedRowKeys
 //加入allRows去重 使用selectedRowKey作为key
 let tempRows = vuexData.selectionRows
 tempRows.forEach(val => {
        state.allRows.set(val.id, val)
      })
      //根据selectedRowKeys从allRows拿有效值保存到selectionRows
 state.selectionRows = []
      vuexData.selectedRowKeys.forEach(val => {
        state.selectionRows.push(state.allRows.get(val))
      })
    }
    //新增selectionRows
 }
}

重写table的onChange事件

onSelectChangePlus(selectedRowKeys, selectionRows) {
  let vuexData = {selectedRowKeys,selectionRows}
  this.$store.commit('table/updateRecords',vuexData);
  this.selectedRowKeys = selectedRowKeys;
  this.selectionRows = this.$store.state.table.selectionRows
 //发送给父组件选中情况
 this.$emit("receive",this.selectionRows);
},

注意清理vuex

this.$store.commit('table/clearSelections')

你可能感兴趣的:(javascript,前端,vue.js,antdesign,es6)