VUE使用el-table展开行加载子节点table联动勾选《VUE专栏四》

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);
                    }
                   
                }