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

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参数的属性赋值一下就可以查询了.