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

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>

平安夜快乐​！！​！​

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