VUE使用el-table展開行載入子節點table聯動勾選《VUE專欄四》
阿新 • • 發佈：2020-08-05
Vue專案中使用el-table聯動勾選，要求選中父節點，子節點table全選，選中所有子節點，對應的父節點勾選框選中，勾選全部父節點，子節點全部選中，效果如下圖
el-table的展開行下的table是一個list，因此對應的ref選擇用與子table同級的prodId唯一鍵作為ref繫結的唯一值，因此可以判斷是父節點的哪一行，再判斷父節點下的子節點選中效果，el-table展開行，在子節點隱藏時會勾選不上，從而無法獲取子節點資料，在這裡，我們會對子節點的資料加上狀態標識，來標識子節點是否被選中的效果，子節點在展開時會通過標識的狀態，重新勾選上，最後選中的子節點資料就是帶有勾選標識的資料。
程式碼實現：
table表格程式碼：
<el-table border :data="formData.itemVOList" style="width: 100%;" :header-cell-style="{background:'rgba(239,242,253,0.4)'}" ref="multipleTable" @select="itemVOSelect" @select-all ="itemVOAllSelect"> <el-table-column type="expand"> <template slot-scope="scope"> <el-table border label-position="left" :data="scope.row.afterSoList" :ref="scope.row.itemDetailRefKey" :header-cell-style="{background:'rgba(239,242,253,0.4)'}" style="width: 100%;" @selection-change="handleItemSelectionChange(scope.row.prodId)"> <el-table-column type="selection" width="50"> </el-table-column> <el-table-column label="退貨單號" prop="fahuoAfterSoNumber"></el-table-column> <el-table-column label="銷售單號" prop="soNumber"></el-table-column> <el-table-column label="退貨數量" prop="shouldPickQuantity"></el-table-column> <el-table-column label="售後申請時間" prop="createAt"></el-table-column> <el-table-column label="提前賠付" prop="advanceStatus"> <template slot-scope="scope"> {{scope.row.advanceStatus == 0 ? '否': scope.row.advanceStatus == 1 ? '是' : ''}} </template> </el-table-column> <el-table-column label="退貨使用者" prop="userName"></el-table-column> </el-table> </template> </el-table-column> <el-table-column type="selection" width="50"> </el-table-column> <el-table-column label="序號" type="index"> </el-table-column> <el-table-column label="SKU編碼" prop="prodNumber"></el-table-column> <el-table-column label="商品名稱" prop="prodName"></el-table-column> <el-table-column label="規格" prop="specification"></el-table-column> <el-table-column label="供應商" prop="supplyName"></el-table-column> <el-table-column label="銷售模式" prop="merchantModel"> <template slot-scope="scope"> {{ scope.row.merchantModel == 1 ? "代銷" : scope.row.merchantModel == 2 ? "經銷" : ""}} </template> </el-table-column> <el-table-column label="產品ID" prop="prodId"></el-table-column> <el-table-column label="商品屬性" prop="storageType"> <template scope="scope"> {{scope.row.storageType == 10 ? "常溫" : scope.row.storageType == 20 ? "冷凍" : scope.row.storageType == 30 ? "冷藏" : "" }} </template> </el-table-column> <el-table-column label="一級類目" prop="oneCategoryName"></el-table-column> <el-table-column label="退貨數量" prop="shouldPickQuantity"></el-table-column> <el-table-column label="取貨數量" prop="realPickQuantity"></el-table-column> <el-table-column label="入庫數量" prop="quantity"> </el-table-column> </el-table>
方法：
資料結構：
public formData = {
batchInfo: {},
itemVOList: [{
prodId,
......,
afterSoList:[]
},{}.....]
};
//商品全選
public itemVOAllSelect(val) {
let itemVOList = this.formData.itemVOList;
if(val && val.length>0){
for(let prodItem of itemVOList){
let tempRef = this.$refs[prodItem.itemDetailRefKey];
for(let item of prodItem.afterSoList){
item["selectStatus"] = 1
if(tempRef){
//@ts-ignore
this.$refs[prodItem.itemDetailRefKey].toggleRowSelection(item,true);
}
}
}
}else{
for(let prodItem of itemVOList){
let tempRef = this.$refs[prodItem.itemDetailRefKey];
for(let item of prodItem.afterSoList){
item["selectStatus"] = 0
if(tempRef){
//@ts-ignore
this.$refs[prodItem.itemDetailRefKey].toggleRowSelection(item,false);
}
}
}
}
}
//商品勾選
public itemVOSelect(val,selectRow) {
let selProdIdMap = {}
if(val){
for(let item of val){
let prodId = item.prodId;
selProdIdMap[prodId] = 1;
}
}
let tempRef = this.$refs[selectRow.itemDetailRefKey];
if(selProdIdMap[selectRow.prodId] && selProdIdMap[selectRow.prodId] == 1){
for (let row of selectRow.afterSoList) {
row["selectStatus"] = 1
if(tempRef){
//@ts-ignore
this.$refs[selectRow.itemDetailRefKey].toggleRowSelection(row,true);
}
}
}else{
for (let row of selectRow.afterSoList) {
row["selectStatus"] = 0
if(tempRef){
//@ts-ignore
this.$refs[selectRow.itemDetailRefKey].toggleRowSelection(row,false);
}
}
}
}
public handleItemSelectionChange(val) {
let refKey = "itemDetail" + val;
//@ts-ignore
let prodInfoList = this.$refs[refKey].selection;
let afterSoIdMap = {}
if (prodInfoList.length > 0) {
for (let item of prodInfoList) {
afterSoIdMap[item.id] = 1;
}
}
for (let prodItem of this.formData.itemVOList) {
if (prodItem.prodId == val) {
for (let soItem of prodItem.afterSoList) {
if (afterSoIdMap[soItem.id] && afterSoIdMap[soItem.id] == 1) {
soItem["selectStatus"] = 1;
} else {
soItem["selectStatus"] = 0
}
}
let selectStatus = false;
let unSelectStatus = false;
for(let item of prodItem.afterSoList){
if(item["selectStatus"] == 1){
selectStatus = true
}else{
unSelectStatus = true;
}
}
//明細全未勾選
if(!selectStatus && unSelectStatus){
//@ts-ignore
this.$refs.multipleTable.toggleRowSelection(prodItem, false);
}
//明細全選
if(!unSelectStatus && selectStatus){
//@ts-ignore
this.$refs.multipleTable.toggleRowSelection(prodItem, true);
}
break;
}
}
}
最後選中明細獲取：
let itemVOList = this.formData.itemVOList;
let selAfterSoList = [];
for (let prodItem of itemVOList) {
for (let soItem of prodItem.afterSoList) {
if (soItem["selectStatus"] == 1) {
selAfterSoList.push(soItem);
}
}