天天看点

table表头多选框禁用 vue_vuetable选框问题及案例

具体要实现的细节点击表头的复选项,会进行全选;再次点击,会取消;

每次需要把选中该行的id传过去

切换分页的时候,需要有记忆功能:也就是翻页原本选中的不应该消失 。下方图片展示:(展示的是所有的选中的,切换分页的)

第一步添加对应的复选框

table表头多选框禁用 vue_vuetable选框问题及案例
table表头多选框禁用 vue_vuetable选框问题及案例

具体参照element官网示例``

* 1`

`

* 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

table表头多选框禁用 vue_vuetable选框问题及案例
table表头多选框禁用 vue_vuetable选框问题及案例

第三步对于切换分页

在表头那里加个:row-key="(row)=>{ return row.id}"`也就是下面这个样子`

* 1``

* 1

在自己加的里面加个`:reserve-selection="true"`

* 1

也就是下面这个``

* 1

table表头多选框禁用 vue_vuetable选框问题及案例
table表头多选框禁用 vue_vuetable选框问题及案例