Vue + Element + Table 分页选择勾选 和取消勾选的问题

在第一页选取数据之后 再去其他页再去选取数据 然后回到第一页,第一页选取的数据已经不是勾选状态了。切换页码之前的选中状态已经清除
1、在table一定要定义以下事件和列表属性:
row-key //写在table标签上
reserve-selection // 写在有选择框的那一列上

 <el-table @selection-change="handleSelectionChange" :row-key="getRowKeys">
  ......
 </el-table>  //写在table标签上
 
 <el-table-column type="selection" :reserve-selection="true" width="40" align="center">
</el-table-column>   // 写在有选择框的那一列上 type 必须为 selection
2、在data上定义row-key绑定的

getRowKeys(row) {
    return row.id;
},
3、把勾选的数据传到后台所以在methods定义

handleSelectionChange(val) {
    this.multipleSelection = val;//勾选放在multipleSelection数组中
},
到现在已经实现我的需求了 but并没有结束 新的问题又来了 我对选取的这些数据进行这一系类操作点了确定之后 表格中的数据仍然是我刚才勾选的状态 怎么清空呢 有人说 刷新表格数据呗 不好意思 不生效 也不太符合逻辑 好了 不说了 上代码

1、在表格上操作dom元素 设置ref属性

 <el-table @selection-change="handleSelectionChange" ref="multiTable" :row-key="getRowKeys">
  ......
 </el-table>

在你点完确定后 调用此方法 比如是弹框 有个确定按钮 绑定的click事件为confirm 在methods里写confirm方法

confirm(){
this.dialogvisible=false //关闭弹框
this.$refs.multiTable.clearSelection() //清除选中的数据
}

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值