vue3+＜script setup＞+element-plus中的el-table树形数据与懒加载

这里没使用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>