element table跨分页多选及回显的实现示例
更新时间:2022年02月23日 10:11:36 作者:妮可是条狗
本文主要介绍了element table跨分页多选及回显的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
1.data中定义getRowKeys,记录每行的key值
getRowKeys(row) { return row.id; },
2.el-table绑定getRowKeys
<el-table :data="tableData" @selection-change="handleSelectionChange" :row-key="getRowKeys" >
3.将selection列的reserve-selection设为true
<el-table-column type="selection" width="50" align="center" :reserve-selection="true" ></el-table-column>
4.表格数据选中方法handleSelectionChange
handleSelectionChange(rows) { this.multipleSelection = rows; this.select_number = this.multipleSelection.length; this.select_Id = []; if (rows) { rows.forEach((row) => { if (row) { this.select_Id.push(row.id); } }); } },
代码整理
<template> <div> <el-table @selection-change="handleSelectionChange" :row-key="getRowKeys"> <el-table-column type="selection" width="50" align="center" :reserve-selection="true"> </el-table-column> </el-table> <el-pagination>...</el-pagination> </div> </template> <script> export default { data() { return { multipleSelection: [], // 表格选中 getRowKeys(row) {//记录每行的key值 return row.id; }, select_number: "", //表格select选中的条数 select_Id: [], //表格select复选框选中的id } }, methods: { handleSelectionChange(rows) { this.multipleSelection = rows; this.select_number = this.multipleSelection.length; this.select_Id = []; if (rows) { rows.forEach((row) => { if (row) { this.select_Id.push(row.id); } }); } }, } }
到此这篇关于element table跨分页多选及回显的实现示例的文章就介绍到这了,更多相关element table跨分页多选及回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
这篇文章主要介绍了详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论