elementUI表格數(shù)據(jù)復(fù)選框回顯

elementUI中的表格增加復(fù)選功能并進行數(shù)據(jù)回顯

第一步：我先把elementui中的表格格式展示出來

要注意el-table標簽里面的@selection-change="handleSelectionChange"這個方法,下面會用到的。還有ref屬性，在下面都會用到。還有這里的type，是elementui自帶的，自己去看文檔。

第二步：就是要寫邏輯，拿數(shù)據(jù)了。

眾所周知Vue中的數(shù)據(jù)綁定在data中,方法掛載在methods中,

如圖：

這里的方法就是上面在table里面綁定的一個@selection-change="handleSelectionChange"，就是通過這個方法，點擊復(fù)選框，進行傳參val來獲取到每行的數(shù)據(jù)，記錄每行，在循環(huán)遍歷val，拿到的當前行的id，放到聲明數(shù)組中arr。

第三步：這里就要循環(huán)遍歷，拿到數(shù)據(jù)的總數(shù)組和選中的數(shù)組了，雙循環(huán)，將兩個數(shù)組中的id進行判斷，比較。

如圖：

這里我將這個寫在updated(){}里面，在這里我要寫在這個鉤子里面，來解決渲染前后的問題。toggleRowSelection()需要頁面渲染完畢之后才有效，因此需要放在this.$nextTick中，如果只有一頁數(shù)據(jù)，這樣就可以了，但是在有多頁數(shù)據(jù)的情況下，每次翻頁就會請求數(shù)據(jù)，進行數(shù)據(jù)更新，因此this.$nextTick需要放在updated回調(diào)中，等數(shù)據(jù)更新和頁面渲染都完成時，才有效。這里一定一定一定要注意?。。。。。?！

第四步：提交頁面選中數(shù)據(jù)。

如圖：

這樣就完成了。

最后，致所有前端開發(fā)，共勉。