vue-element ui 表格嵌套表格父子勾选 toggleRowSelection()方法无法生效,
部分代码
<el-tablestyle="margin:10px 0;border:1px solid #eee;width:100%;"
ref="refTable"
v-loading="listLoading"
:data="tableData"
:max-height="maxTableHeight"
@selection-change="selectionChange"
@expand-change="expandChange"
>
<el-table-column type="expand">
<template slot-scope="scope">
<el-table
:data="scope.row.child"
border
style="width: 100%"
@selection-change="(selection)=>selectionSubChange(selection,scope.$index)"
:ref="`subTable${scope.$index}`"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="payStageName" label="费用类型"></el-table-column>
<el-table-column prop="payRate" label="付款比例"></el-table-column>
<el-table-column prop="amount" label="计划结算金额"></el-table-column>
<el-table-column prop="date" label="结算周期"></el-table-column>
<el-table-column prop="name" label="计划结算时间"></el-table-column>
<el-table-column prop="incomeplanRate" label="回款比例"></el-table-column>
<el-table-column prop="createTime" label="完工验收时间"></el-table-column>
<el-table-column prop="stopTime" label="停留时长"></el-table-column>
<el-table-column prop="specialName" label="特殊审批"></el-table-column>
<el-table-column prop="settlementNo" label="结算单号"></el-table-column>
</el-table>
</template>
</el-table-column>
我在表格展开后执行内部勾选的代码,
expandChange(row, rows) {this.$nextTick(function() {
//this.ceshiData为勾选外层表格selection数组
this.ceshiData.forEach((item, i) => {
if (item.id === row.id) {
//判断展开行的id是不是与外层勾选数组中相同,如果相同,就执行row.child,即内部表格循环
row.child.forEach((list, index) => {
this.$refs["subTable" + [i]].toggleRowSelection(list, true);
});
}
});
});
},
上面代码也已经触发了内部复选框的select-change方法,但是复选框就是不勾选,各种尝试都不行,不知道是哪里的问题, 烦劳有经验的人帮忙解答下,在此谢过了!!!
回答
你这个方法写的是没什么问题的 也可以达到预期效果 只是没有做合上展开层的判断
不知道你说的意思是不是在他展开状态下 你点击父表格勾选没有勾选子表格的复选框?
这个操作要写在selectionChange
方法里的
demo
以上是 vue-element ui 表格嵌套表格父子勾选 toggleRowSelection()方法无法生效, 的全部内容, 来源链接: utcz.com/a/30960.html