树结构展开:事件 @expand-change='handledetail'
设置:type="expand"
<el-table :data="videoList.content" row-key="id" style="width: 100%;background-color: #000; " :show-header='false' @expand-change='handledetail'>
<el-table-column type="expand">
<template slot-scope="props">
<div style="background-color: #292b35;">
子页内容
</div>
</template>
</el-table-column>
<el-table-column>
主页内容
</el-table-column>
事件处理:
res.content = res.content.map((item, index) => {
item.keyId = index;
item.childrenData = []; // 添加子表格数据
return item;
});
获取子数据:其中有判断展开的事件
handledetail(row, expandedRows) {
if (this.tableLength - expandedRows.length == 1) {
this.tableLength = expandedRows.length + 2;
this.$set(row, "loading", true);
const params = { courseId: row.id };
queryItem(params).then((res) => {
const taskData = res;
console.log(taskData, "视频子数据");
// 遍历父层表格数据
this.videoList.content.forEach((temp, index) => {
console.log(temp, "====46578=");
// 找到当前展开的行,把获取到的数据赋值进去
if (temp.id === row.id) {
this.videoList.content[index].childrenData = taskData || [];
}
});
this.$set(row, "loading", false);
});
} else {
this.tableLength = expandedRows.length + 2;
console.log("关闭", "=====");
}
},