关于vue.js:vuetable选框问题及案例

具体要实现的细节

• 点击表头的复选项，会进行全选；再次点击，会勾销；
• 每次须要把选中该行的id传过来
• 切换分页的时候，须要有记忆性能：也就是翻页本来选中的不应该隐没 。下方图片展现：（展现的是所有的选中的，切换分页的）

第一步增加对应的复选框

具体参照element官网示例

`<el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange" v-loading="listLoading" border  @cell-dblclick="celldblclick">` *   1

 `<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>` *   1*   2*   3*   4*   5*   6*   7*   8*   9

第二步传id过来的话

这个是页面布局

`// 点击多选    handleSelectionChange(val) {      this.multipleSelection = val;      this.batchPassArr = [] //每次点击需清空本来数组的内容      this.multipleSelection.map(item => { //遍历数组，把id存进自定义的数组里        this.batchPassArr.push(item.id)      })      this.batchPassArr = this.batchPassArr.join(',')     },` *   1*   2*   3*   4*   5*   6*   7*   8*   9*   10*   11*   12*   13*   14*   15*   16*   17

第三步对于切换分页

在表头那里<el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange" v-loading="listLoading" border @cell-dblclick="celldblclick"></el-table>加个:row-key="(row)=>{ return row.id}"

 `也就是上面这个样子` *   1

`<el-table :data="tableData" ref="multipleTable" :row-key="(row)=>{ return row.id}" tooltip-effect="dark" @selection-change="handleSelectionChange" v-loading="listLoading" border  @cell-dblclick="celldblclick"></el-table>` *   1

在本人加的外面加个

`:reserve-selection="true"` *   1

也就是上面这个

`<el-table-column type="selection" :reserve-selection="true"></el-table-column>` *   1