当前位置: 首页 > Web前端 > vue.js

解决antd表格组件翻页后selectionRows被清空的问题

时间:2023-03-31 15:38:38 vue.js

使用vuex存储数据exportconsttable={namespaced:true,state:{selectedRowKeys:[],//当前选中的对象主键selectionRows:[],//当前选中的对象allRows:newMap//去重后的全局对象},mutations:{//清除clearSelections(state){state.selectedRowKeys=[]state.selectionRows=[]state.allRows=newMap},//添加selectedRowKeysupdateRecords(state,vuexData){state.selectedRowKeys=vuexData.selectedRowKeys//添加allRows去重并使用selectedRowKey作为keyselectedRowKeysselectionRowsstate.selectionRows=[]vuexData.selectedRowKeys.forEach(val=>{state.selectionRows.push(state.allRows.get(val))})}}}重写表的onChange事件onSelectChangePlus(selectedRowKeys,selectionRows){letvuexData={selectedRowKeys,selectionRows}this.$store.commit('table/updateRecords',vuexData);this.selectedRowKeys=selectedRowKeys;日is.selectionRows=this.$store.state.table.selectionRows//发送给父组件选择this.$emit("receive",this.selectionRows);}注意清洗vuexthis.$store.commit('table/清除选择')