vue+element-ui里面table组件多选框实现批量操作

有时候人不是被困难难倒的,是被自己蠢哭的。。。官方文档用到某个地方的时候,才感觉对这个方面的理解才会加深一点,还是要记录一下这个地方!

具体要实现的细节

* 点击表头的复选项,会进行全选;再次点击,会取消;
* 每次需要把选中该行的id传过去
* 切换分页的时候,需要有记忆功能:也就是翻页原本选中的不应该消失 。下方图片展示:(展示的是所有的选中的,切换分页的)
第一步添加对应的复选框

具体参照element官网示例
<el-table :data="tableData" ref="multipleTable" tooltip-effect="dark"
@selection-change="handleSelectionChange" v-loading="listLoading" border
style="width: 100%" @cell-dblclick="celldblclick"> <el-table-column
type="selection"></el-table-column> <el-table-column prop="id"
label="编号"></el-table-column> <el-table-column prop="nameOne"
label="名称1"></el-table-column> <el-table-column prop="nameTwo"
label="名称2"></el-table-column> </el-table>
第二步传id过去的话

这个是页面布局
// 点击多选 handleSelectionChange(val) { this.multipleSelection = val;
this.batchPassArr = [] //每次点击需清空原本数组的内容 this.multipleSelection.map(item => {
//遍历数组,把id存进自定义的数组里 this.batchPassArr.push(item.id) }) this.batchPassArr =
this.batchPassArr.join(',') },

第三步对于切换分页

在表头那里<el-table :data="tableData" ref="multipleTable" tooltip-effect="dark"
@selection-change="handleSelectionChange" v-loading="listLoading" border
style="width: 100%" @cell-dblclick="celldblclick"></el-table>加个
:row-key="(row)=>{ return row.id}"
也就是下面这个样子 <el-table :data="tableData" ref="multipleTable" :row-key="(row)=>{
return row.id}" tooltip-effect="dark" @selection-change="handleSelectionChange"
v-loading="listLoading" border style="width: 100%"
@cell-dblclick="celldblclick"></el-table>
在自己加的里面加个
:reserve-selection="true"
也就是下面这个
<el-table-column type="selection" :reserve-selection="true"></el-table-column>

平安夜快乐​!!​!​

有问题的地方,可以多多指导

技术
©2019-2020 Toolsou All rights reserved,
css中上下左右居中的几种实现方法[CISCN 2019 初赛]Love Mathc/c++语言实现登陆界面Unity3D 人称设置(第一人称视角、第三人称视角)Fastadmin框架自定义搜索操作流程2021最新Python自动化软件测试笔试题(含答案)黑客帝国装逼的代码雨mysql数据库设置字符集配置修改my.ini文件(windows)python之panda模块1Python学习笔记:基础+进阶10道练习题