天天看點

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選框問題及案例