ant desgin vue 分页带上selectionRows

描述:
翻页查询后,选择表格onSelectChange(selectedRowKeys, selectionRows) //selectionRows 为当前页选择的记录
需要选取翻页前选择的记录
表格如下:

 <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

修改代码:

data () {
      return { 
        ds:[] , //增加数据源,保存翻页后的数据集
        ...
})
 watch:{
          dataSource:{
              immediate: true,
              handler(value) {
                  const tmp = [...this.ds, ...value ]
                  this.ds = this.dropReduce(tmp,'id')
              },
              deep: true
          },
      },

methods: {
 // 去重函数(list:数组,key:记录唯一字段)
        dropReduce(list,key) {
            // 定义一个空对象,利用对象的键的唯一进行去重
            let obj = {}
            // 去重(cur:init默认list,next:数组子项,index:表示当前正在处理的数组元素的索引,arr:表示原数组)
            return list.reduce((cur,next,index,arr) => {
                obj[next[key]]?"":obj[next[key]]=true && cur.push(next)
                return cur
            }, [])
        },
},
/**重写表格行选择
         * */
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            const tmpKeys = new Set(selectedRowKeys)
          this.selectionRows = this.ds.filter(it=>tmpKeys.has(it.id))  

        },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值