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);
}
}
以上是 VUE使用el-table展开行加载子节点table联动勾选《VUE专栏四》 的全部内容， 来源链接： utcz.com/z/376245.html
