在寫業(yè)務(wù)的時(shí)候難免遇到table多選靴寂，翻頁后需要回顯的功能塘揣，以前寫react antd 組件是提供一個(gè)所有保存rowKeys的數(shù)組保存的辛掠，自動(dòng)回顯弥激，然后可以自定義key丰榴，比如用每條數(shù)據(jù)的id做key，一般后端給的數(shù)據(jù)的id都是唯一的秆撮，所以沒有問題四濒。
但是在寫vue的時(shí)候發(fā)現(xiàn)，不管是element還是iview 都沒有提供自定義table數(shù)據(jù)key的功能职辨，所以做回顯自能自己寫邏輯盗蟆，因?yàn)樽罱谟胕view 就用iview做例子
on-select 在多選模式下有效，選中某一項(xiàng)時(shí)觸發(fā) selection：已選項(xiàng)數(shù)據(jù) row：剛選擇的項(xiàng)數(shù)據(jù)
on-select-cancel 在多選模式下有效舒裤，取消選中某一項(xiàng)時(shí)觸發(fā) selection：已選項(xiàng)數(shù)據(jù)
row：取消選擇的項(xiàng)數(shù)據(jù)
需要用到的就是這兩個(gè)方法喳资，然后加上
通過給 columns 數(shù)據(jù)設(shè)置一項(xiàng)，指定 type: 'selection'腾供，即可自動(dòng)開啟多選功能仆邓。
給 data 項(xiàng)設(shè)置特殊 key _checked: true 可以默認(rèn)選中當(dāng)前項(xiàng)鲜滩。
下面上代碼
<Table
:columns="tableColumn"
:data="tableData"
ref="table"
@on-select="selectChange"
@on-select-cancel="selectChangeCancel"
>
</Table>
// 勾選
selectChangeOut(el, row) {
let productData = JSON.parse(JSON.stringify(this.productData))
productData.push(row)
this.productData = productData
},
// 取消選擇
selectChangeCancel(el, row) {
let productData = JSON.parse(JSON.stringify(this.productData))
let newProductData = productData.filter(item => {
return item.id != row.id
})
this.productData = newProductData
},
// 回顯勾選
selectedTrue(selects) {
setTimeout(() => {
let tableData = JSON.parse(JSON.stringify(this.tableData))
this.productData.forEach(el => {
let index = tableData.findIndex(i => {
return el.id == i.id
})
if (index != -1) {
this.$refs.table.objData[index]._isChecked = true
}
})
}, 0)
},
在每次分頁請(qǐng)求之后調(diào)用這個(gè)方法就好了，為什么要setTimeout节值，是因?yàn)槿绻患俞愎瑁敲催@個(gè)方法執(zhí)行會(huì)在table數(shù)據(jù)填充之前 ，找不到able的objData屬性搞疗。各位有其他更好的回顯方法也可以試試
回顯方法個(gè)人建議嗓蘑，直接放在 請(qǐng)求后端接口的方法里面，比如我個(gè)人喜歡用getData做請(qǐng)求接口函數(shù)名
// 調(diào)接口查詢數(shù)據(jù)
getData: async function() {
let res = await xxxx()
this.selectedTrue()
}
以上
這么寫會(huì)有一個(gè)bug 就是點(diǎn)擊全選的時(shí)候匿乃，數(shù)據(jù)并不能保存在 this.productData里面桩皿，可以自己再寫一個(gè)全選的，或者用on-selection-change換掉on-select 邏輯就大家自己寫了哦
