共计 1422 个字符,预计需要花费 4 分钟才能阅读完成。
具体要实现的细节
- 点击表头的复选项,会进行全选;再次点击,会勾销;
- 每次须要把选中该行的 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
正文完