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

2023-12-15 04:56:58

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

文章来源:https://blog.csdn.net/m0_59642018/article/details/134920469
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。