前言
最近在写项目的时候,有个使用 el-table 内嵌动态 table 的功能需求,也就是 table 内嵌 table,同时里面的 table 数据是动态获取的,动态获取动态展开
问题
按照 element 的 table 里面的方法,行属性设置了 type=’expand’,也在 table 里面添加了 @expand-change=”expandChange” 时间监听展开行事件,在监听时间里面动态获取数据赋值给里面展开的 table,
问题出现了,第一次点开没数据,第二次点开才有数据
①:第一次点开效果
②:第二次展开数据显示出来
解决
看到这个其实都知道是 dom 数据渲染不同步造成的(没有及时回显),那么该怎么做呢?于是开始了自我尝试以及度娘的过程,过程中发现了很多小伙伴也遇到了这样的问题,也有很多方法:
1:使用 this.$nextTick 的,
2:使用 v -if 显示隐藏内嵌 table 的,
3:: 有不使用 @expand-change 方法 — 改成 toggleRowExpansion 控制的,
但是最终这些方法或多或少都有问题,当时自己也是一脸懵逼不知道咋办,
中午休息的时候突然灵光一闪,既然是 dom 渲染的问题,为何我不先给这行数据里面加上一个我需要的数据,动态获取的数据直接丢进去,这样是不是就解决了呢?说干就干:** 第一步 **:原来的设置不变,稍微改动一下展开行
<el-table
class="common-table"
:data="tableData"
style="width: 100%"
stripe
border
@expand-change="expandChange"
>
<el-table-column type="expand">
<template slot-scope="scope">
<el-table :data="scope.row.ruleItemData" border stripe style="width: 100%">
<el-table-column prop="questioncount" label="试题数量"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="regionName" label="地区"></el-table-column>
</el-table>
第二步 :获取外部 table 表数据的时候强制追加一个数据项
// 获取表数据
queryData() {rule.selectByPage(this.queryForm).then(res => {if (res) {
// 给每行数据强制追加一个数据项
res.content.list.map(item => {item.ruleItemData = [];
});
this.tableData = res.content.list;
}
});
},
第三步 :动态获取内嵌表数据,动态赋值当前行
// 展开事件 ---- 动态获取内嵌表数据
expandChange(row, expandedRows) {
// 该处是用于判断是展开还是收起行,只有展开的时候做请求,避免多次请求!// 展开的时候 expandedRows 有值,收起的时候为空.
if (expandedRows.length > 0) {
rule
.itemSelectByRuleID({examruleid: row.id})
.then(res => {
// 遍历当前页面表
this.tableData.forEach((temp, index) => {
// 找到当前点击的行,把动态获取到的数据赋值进去
if (temp.id === row.id) {this.tableData[index].ruleItemData = res.content;
}
});
});
}
}
这样就完美了,不论点开哪一行都是动态渲染哪一行的内嵌表数据。
附上精简了一下的整体代码供大家参考
<template>
<div class="common-page">
<el-table
class="common-table"
:data="tableData"
style="width: 100%"
stripe
border
@expand-change="expandChange"
>
<el-table-column type="expand">
<template slot-scope="scope">
<el-table :data="scope.row.ruleItemData" border stripe style="width: 100%">
<el-table-column prop="questioncount" label="试题数量"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="regionName" label="地区"></el-table-column>
</el-table>
</div>
</template>
<script>
import {rule} from "@/api/api";
export default {data() {
return {queryForm: {},
tableData: []};
},
created() {this.queryData();
},
methods: {
// 获取表数据
queryData() {rule.selectByPage(this.queryForm).then(res => {if (res) {
// 给每行数据强制追加一个数据项
res.content.list.map(item => {item.ruleItemData = [];
});
this.tableData = res.content.list;
}
});
},
// 展开事件 ---- 动态获取内嵌表数据
expandChange(row, expandedRows) {
// 该处是用于判断是展开还是收起行,只有展开的时候做请求,避免多次请求!// 展开的时候 expandedRows 有值,收起的时候为空.
if (expandedRows.length > 0) {
rule
.itemSelectByRuleID({examruleid: row.id})
.then(res => {
// 遍历当前页面表
this.tableData.forEach((temp, index) => {
// 找到当前点击的行,把动态获取到的数据赋值进去
if (temp.id === row.id) {this.tableData[index].ruleItemData = res.content;
}
});
});
}
}
}
};
</script>
<style>
</style>
希望对遇到相同问题的小伙伴有帮助,收工!