el-table 实现懒加载 异步获取的数据

文章讲述了如何将el-ui官网的懒加载示例应用于从后端获取的数据。主要步骤包括保持HTML模板不变,调整JS部分,去除setTimeout,使用异步API调用来加载数据。关键在于数据格式需包含hasChildren属性,并在load方法中正确处理resolve回调的数组数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

el-ui官网的懒加载栗子是固定写的数据

那么我们自己从后端获取的数据有何变化,又如何写呢

其实,

差别不大.

html部分可以完全拷贝,没有问题的.

<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="日期"
      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>
</div>
</template>

至于 js部分

建议去除setTimeout部分

因为本身就是异步获取数据,有一定的时间差,当然加上也是完全没问题滴.

伪代码附上,调用自己的api获取数据,即可.

重要的是数据的格式,

hasChildren 布尔值属性要有的,

  load(tree, treeNode, resolve) {
        setTimeout(() => {
          调用api.then(response=> resolve(response.data) ))  //注意回调的data必须为数组.
        }, 1000)
      }

只要数据格式没错,

方法没错数据都可以正常展示的,

tree参数表示当前位置节点信息的.需要查询吧tree参数的属性赋值一下就可以查询了.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值