element中table的多选框,以及回显列表里已经选中的,(翻页也可保持已选中状态)
在开发过程中,经常有批量操作的需要,有时候需要翻页多选,或者回显已选择状态。
1 2 3 4 5 6 7 8 9 | <el-table v-loading= "loading" :data= "list" :row-key= "(row) => row.id" ref = 'multipleTable' @selection-change= "handleSelectionChange" > <el-table-column type= "selection" :reserve-selection= "true" width= "100" ></el-table-column> <el-table-column prop= "date" align= "center" label= "商品信息" > <template slot-scope= "scope" > <p>{{scope.row.name}}</p> </template> </el-table-column> <el-table-column prop= "date" align= "center" label= "商品分类" >热门图书</el-table-column> </el-table> |
:row-key="(row) => row.id"是唯一标识,
1 | handleSelectionChange方法监听选中的数据 |
1 | :reserve-selection= "true" 放在type= "selection" 中,是回显数据的必要条件 |
handleSelectionChange(row){ console.log(row);//row就是你当前选中的数据,你可以根据需要获取id或者需要的参数,进行后续操作 }
1 2 3 4 5 6 7 | this .selectionKeys.forEach(key => { this .list.forEach(row => { if (row.id== key.id) { this .$refs.multipleTable.toggleRowSelection(row, true ); } }) }) |
selectionKeys是你获取到的需要回显的数据,
1 | list是你获取到的table的数据,当两个列表的id相等时,即可在 ref 中multipleTable回显。根据以上代码,即可回显数据,翻页也不会失效 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix