selection-change 參數(shù)只有一個(gè)selection ：?可以獲取到當(dāng)前勾選的row的數(shù)據(jù)，勾選自動(dòng)行程數(shù)組
@selection-change="handleSelectionChange"
? ?// 多選框選中數(shù)據(jù)
? ? handleSelectionChange(selection) {
? ? ? ? //selection 是勾選中的數(shù)組
? ? },
?select 參數(shù)?selection 選中的數(shù)組??row 當(dāng)前選中的單條數(shù)據(jù)
@select="handleSelectOne"
?// 多選框選中單條數(shù)據(jù)
? ? handleSelectOne(selection, row) {
? ? ? console.log(selection, row)
? ? },
?
select-all?參數(shù)?selection 全選選中的數(shù)組
@select-all="handleSelectAll"
?
? ?// 多選框全選
? ? handleSelectAll(selection) {
? ? ? console.log( selection)
? ? },
?
場(chǎng)景1：
實(shí)現(xiàn)思路：table勾選后獲取勾選數(shù)據(jù)，可以使用selection-change返回的selection就是勾選中的數(shù)據(jù)
場(chǎng)景2：
tableA在彈窗中，打開(kāi)彈窗tableA勾選后獲取勾選數(shù)據(jù)，關(guān)閉數(shù)據(jù)，數(shù)據(jù)回顯另一個(gè)tableB，再次打開(kāi)彈窗tableA，要展示剛剛已經(jīng)選中的數(shù)據(jù)
實(shí)現(xiàn)思路：
黃色的那一步還是selection-change返回的selection就是勾選中的數(shù)據(jù)給到tableB，
藍(lán)色的那一步需要在打開(kāi)彈窗獲取到接口數(shù)據(jù)后，把選中的數(shù)組數(shù)據(jù)和tableB的接口數(shù)據(jù)做匹配，篩選出id相等的數(shù)據(jù)，使用表格toggleRowSelection回顯勾選
（tips:接口中操作是為了可以實(shí)現(xiàn)分頁(yè)翻頁(yè)勾選不會(huì)被重置,$nextTick一定要加上，因?yàn)樾枰饔迷趶棿按蜷_(kāi)之后才能$refs獲取到表格）
例如：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-858259.html
// 假設(shè)這是一個(gè)獲取后臺(tái)服務(wù)器的接口數(shù)據(jù)
associatedDrugs(this.queryParams).then(response => {
//獲取到數(shù)據(jù)之后復(fù)制給到彈窗Table
this.dialogTableList = response.rows;
//打開(kāi)彈窗
this.dialogVisible = true;
// 切換分頁(yè)或者tab保持原來(lái)選擇的已有數(shù)據(jù)打勾
this.$nextTick(() => {
//this.selectionList原來(lái)已經(jīng)選中的數(shù)據(jù)
this.selectionList.forEach(item => {
let checkItem = this.dialogTableList.find(v => v.id == item.id);
if(checkItem) {
//this.$refs.dialogTable獲取到你自己定義的彈窗表格ref
this.$refs.dialogTable.toggleRowSelection(checkItem);
}
})
})
})
場(chǎng)景3：
取消勾選的思路，原有選中數(shù)據(jù)需要再次點(diǎn)擊，打勾被去掉應(yīng)該去掉數(shù)據(jù)，用?select，兩個(gè)參數(shù)，判斷selection中不包含row，就是取消行為，取消時(shí)，把選中的數(shù)組中的當(dāng)前row做splice刪除
場(chǎng)景4：
全選時(shí)使用select-all，全選時(shí)，因?yàn)橹荒苋x當(dāng)前頁(yè)，所以有分頁(yè)時(shí)要考慮到其他頁(yè)面的原選擇數(shù)據(jù)。所以全選時(shí)，先把所有選中的數(shù)據(jù)都concat進(jìn)去，再去重?cái)?shù)據(jù)。反全選也會(huì)觸發(fā)select-all
場(chǎng)景5：
全選后再單獨(dú)去掉某一個(gè)，會(huì)先觸發(fā)select-all，再觸發(fā)select文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-858259.html
// 選擇商品藥品表格選擇單個(gè)
handleSelectOne(list, row) {
// 去掉勾選
let rowIndex = list.findIndex(e => e.id == row.id);
if(rowIndex == -1) {
let index = this.selectionList.findIndex(v => v.id == row.id);
this.selectionList.splice(index, 1);
}
// 選中的數(shù)據(jù)去掉相同的緩存到selectionList
list.forEach(item => {
let index = this.selectionList.findIndex(v => v.id == item.id);
if(index == -1) {
this.selectionList.push(item);
}
})
},
// 選擇商品藥品表格全選
handleSelectAll(list) {
if(list.length) {
// 全選concat新選，去掉重復(fù)數(shù)據(jù)
let arr = JSON.parse(JSON.stringify(this.selectionList));
arr = arr.concat(list);
this.selectionList = this.removeSameData(arr);
}else {
// 反選操作，要保留分頁(yè)的其他原有數(shù)據(jù)
let arr = JSON.parse(JSON.stringify(this.selectionList));
this.dialogTableList.forEach(item => {
arr = arr.filter(e => e.id != item.id);
})
this.selectionList = arr;
}
console.log(this.selectionList)
},到了這里，關(guān)于隨手記：vue2 使用element UI table表格的單選多選反選思路的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
