vue代码:
<el-table
v-loading="loading"
:data="compileList"
row-key="id"
lazy
:load="loadData"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@selection-change="handleSelectionChange"
>
<el-table-column label="列名称" prop="label" />
</el-table>
js代码:
//表格树形的 1级 数据
async getList() {
this.loading = true;
const data = await structureList(this.queryParams);
if (data.code === 200) {
this.loading = false;
this.compileList = data.rows.map((item) => {
//后端返回的每层的字段不一致 这里赋值给label用其展示
item["label"] = item["column"];
return {
...item,
hasChildren: true, // 设置true就有折叠图标
};
});
}
// console.log(230, this.compileList);
},
// 懒加载 表格树形 2级 3级 数据
loadData(row, treeNode, resolve) {
console.log(311, row);
if (row.section) {
// 3级层 数据
layerList(row.id).then((res) => {
if (res.code === 200) {
console.log(250, res);
resolve(
res.rows.map((item) => {
//后端返回的每层的字段不一致 这里赋值给label用其展示
item["label"] = item["layer"];
return {
...item,
hasChildren: false,
};
})
);
}
});
} else {
// 2级节 数据
sectionList(row.id).then((res) => {
if (res.code === 200) {
resolve(
res.rows.map((item) => {
//后端返回的每层的字段不一致 这里赋值给label用其展示
item["label"] = item["section"];
return {
...item,
hasChildren: true,
};
})
);
}
});
}
},