antd vue的table勾选功能,分页引起的问题解决

365 阅读1分钟

在使用antd vue的table完成勾选提交操作时,在翻到下一页勾选的时候,前一页的勾选就会被取消。下面是解决方案。

  1. 在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
  }
}