在使用 Element UI 的 el-table 组件处理树形数据时，可以结合 lazy 属性和 load 方法实现树形数据的懒加载模式。以下是一个简单的例子：
<template>
<el-table
:data="tableData"
style="width: 100%"
row-key="id"
lazy
:load="loadChildren"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: []
};
},
methods: {
loadChildren(tree, treeNode, resolve) {
// 模拟异步加载子节点数据
setTimeout(() => {
// 假设获取到的子节点数据为children
const children = [
// ...获取到的子节点数据
];
// 通过调用resolve传入子节点数据
resolve(children);
}, 1000);
}
},
mounted() {
// 初始加载顶层节点
this.loadChildren(null, null, data => {
this.tableData = data;
});
}
};
</script>在这个例子中，el-table 组件被设置为 lazy 以启用懒加载模式。load 方法定义了如何加载子节点数据。loadChildren 方法通过模拟异步操作（例如从服务器获取数据）来加载子节点，并在数据加载完成后调用 resolve 函数。tree-props 属性用于指定树形数据的节点标识符。