element-ui表格实现跨页多选

fengzhishay

于 2023-05-24 16:00:06 发布

阅读量1.5k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/fengzhishay/article/details/130831891

版权

通过在type=selection的列中添加reserve-selection属性和在el-table中使用@selection-change及:rowKey，结合getRowKey方法，可以实现表格组件的复选框选择并保留跨页选择的功能。selectionChange方法处理选中项变化，getRowKey确保每一行有唯一的键值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在type="selection"的column中添加reserve-selection属性，以保留当前所选数据

<el-table-column type="selection" width="55" reserve-selection></el-table-column>

2、在el-table标签中添加属性@selection-change="selectionChange"，:rowKey="getRowKey"。注：ex-table-auto是基于el-table标签自己封装的标签

<ex-table-auto ref="workOrderEL" :url="selectWorkOrderUrl" height="600px"
                     @selection-change="selectionChange"
                     :rowKey="getRowKey" // el-table中应为row-key
                     autoPage :autoFill="false" border>

3、相关方法

// 复选框有变动时的回调方法
selectionChange(val) {
      if(val && val.length>0){
            this.selectedWorkOrderList = val.map(e=>e.securityId)
      } else{
            this.selectedWorkOrderList = []
      }
},

// 获取每行的key，是唯一值就行，如果不唯一，一键全选会显示异常
getRowKey(row) {
      return row.id
},

如此便实现了跨页全选功能