在使用antd vue的table完成勾选提交操作时,在翻到下一页勾选的时候,前一页的勾选就会被取消。下面是解决方案。
- 在a-table标签加上row-selection的对象里有selectedRowKeys和onchange事件和rowKey属性,row-selection的对象里有selectedRowKeys和onchange事件。 2.在onchange函数里写逻辑,难点为去重。 3.提交完之后记得把selectRowKeys给置空
<a-table :row-selection="{selectionRowKeys: selectionRowKeys, onchange:onchange}"></a-table>
data() {
return {
selectionRowKeys: [],
selectedRows: []
}
}
methods:{
onchange(selectRowKeys.forEach(item => {
}),selectedRows) {
this.selectRowKeys = selectRowKeys
this.selectedRows.push(...selectedRows)
// selectedRows去重,我使用map
let map = new Map()
this.selectedRows.filter(el => {
return el.orderId = item
}).forEach((el, index) => {
if(!map.has(el.orderId)) {
map.set(el.orderId, el)
}
)
this.selectedRows = = [...map.values()]
let newRows = []
selectRowKeys.forEach(item => {
let newRow = this.selectedRows.filter(el => {
return el.orderId = item
})
newRows.push(...newRow)
})
this.selectedRows = newRows
}
}