这里没使用lang="ts",如果需要使用看element-plus官方文档
element-plus > Table 表格 > 树形数据与懒加载
<template>
? <div>
? ? <el-table
? ? ? :data="tableData1"
? ? ? style="width: 100%"
? ? ? row-key="id"
? ? ? border
? ? ? lazy
? ? ? :load="load"
? ? ? :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
? ? >
? ? ? <el-table-column prop="date" label="Date" />
? ? ? <el-table-column prop="name" label="Name" />
? ? ? <el-table-column prop="address" label="Address" />
? ? </el-table>
? </div>
</template>
<script setup>
const load = (row, treeNode, resolve) => {
? console.log(row, "row");
? console.log(treeNode, "treeNode");
? setTimeout(() => {
? ? resolve([
? ? ? {
? ? ? ? id: 31,
? ? ? ? date: "2016-05-01",
? ? ? ? name: "wangxiaohu",
? ? ? ? address: "No. 189, Grove St, Los Angeles",
? ? ? },
? ? ? {
? ? ? ? id: 32,
? ? ? ? date: "2016-05-01",
? ? ? ? name: "wangxiaohu",
? ? ? ? address: "No. 189, Grove St, Los Angeles",
? ? ? },
? ? ]);
? }, 1000);
};
const tableData1 = [
? {
? ? id: 1,
? ? date: "2016-05-02",
? ? name: "wangxiaohu",
? ? address: "No. 189, Grove St, Los Angeles",
? },
? {
? ? id: 2,
? ? date: "2016-05-04",
? ? name: "wangxiaohu",
? ? address: "No. 189, Grove St, Los Angeles",
? },
? {
? ? id: 3,
? ? date: "2016-05-01",
? ? name: "wangxiaohu",
? ? hasChildren: true,
? ? address: "No. 189, Grove St, Los Angeles",
? },
? {
? ? id: 4,
? ? date: "2016-05-03",
? ? name: "wangxiaohu",
? ? address: "No. 189, Grove St, Los Angeles",
? },
];
</script>