el-table 跨页选中

二话不说,直接上代码

        <el-table
          :data="dataList.results"
          @selection-change="handleSelectionChange"
          v-loading="loading"
          :row-key="rowKeyId"
          ref="taskTableRef">
          <el-table-column type="selection" width="55" fixed :reserve-selection="true" />
        </el-table>

主要就是两点:

1、el-table标签中的row-key,给每一条数据绑定唯一值,赋值如下:

function rowKeyId(row: any) {
  return row.id
}

2、el-table-column上的reserve-selection,在reserve-selection设置为true的情况下,表格数据更新时会保留选中状态。

以上两点即可实现跨页选中。

扩展:

如果做跨页批量删除操作,在调用成功删除接口后,记得清空选中状态,清空方法如下:

taskTableRef.value.clearSelection()

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值