vue-element ui 表格嵌套表格父子勾选 toggleRowSelection()方法无法生效,

部分代码

 <el-table

style="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

回到顶部