vxe-table跨页勾选,保留勾选状态,清空所有页勾选

jeecg基于vxe-table组件封装的<j-vxe-table>,需要实现跨页勾选,保留之前页的勾选状态,并一键清空所有页的勾选

1,要保证所有页都勾选,需要设置 :checkbox-config="{reserve: true}"

注意:事件只能获取当页勾选的数据

           获取其他页勾选的数据:this.$refs.ref_table_task.getCheckboxReserveRecords()

2,设置this.selectedRows储存所有勾选的rows

3,清空所有页勾选:分别清空当页勾选,其他页勾选

 <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
   <i class="anticon anticon-info-circle ant-alert-icon"></i>
    已选择&nbsp;
   <a style="font-weight: 600">{{ selectedRows.length }}</a>项&nbsp;&nbsp;
   <a style="margin-left: 24px" @click="onClearSelected">清空</a>
 </div>

 <j-vxe-table
      ref="ref_table_task"
      toolbar
      :toolbarConfig="toolbarConfig"
      row-selection
      keep-source
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="pagination"
      :checkbox-config="{reserve: true}"
      @pageChange="handlePageChange"
      @selectRowChange="handleSelectRowChange"
    />


   // (1)当选择的行变化时触发的事件
   handleSelectRowChange(event) {
    //当前页选中的数据
    const currentSelectedRows = event.selectedRows
    //其他页选中的数据
    const otherSelectedRows = this.$refs.ref_table_task.getCheckboxReserveRecords()
    const selectedRows = [...currentSelectedRows, ...otherSelectedRows];
    //数组去重
    const seenIds = new Set();
    this.selectedRows = selectedRows.filter(item => {
        if (!seenIds.has(item.id)) {
              seenIds.add(item.id);
               return true;
              }
              return false;
          });
    }

   //(2)清空所有勾选
   onClearSelected(){
    //清空当页勾选
    this.$refs.ref_table_task.clearCheckboxRow();
    //清空其他页勾选
    this.$refs.ref_table_task.clearCheckboxReserve();
    this.selectedRows = []
   }

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值