Element-ui el-table的懒加载树形表格与后端对接口

本文链接：https://blog.youkuaiyun.com/m0_66226018/article/details/131322399

该文章展示了如何在Vue.js应用中使用ElementUI的El-Table组件来创建一个带懒加载功能的表格。表格数据从接口获取，并在用户滚动时按需加载子节点。load方法用于处理懒加载事件，接收树节点信息并调用接口动态加载数据。

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

<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>

script

<script>
  export default {
    data() {
      return {
        tableData1: [],
        id:"",
      }
    },
    methods: {
       //获取数据的接口
       getList(){
          const params = {
              //例如：需要传入的参数
               id:"123"
          }
          getList(params).then(res=>{
              this.tableData1 = res.你接口里面的数据
          })
       },
       //懒加载的表格中有个load加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含点 
       //的层级信息
       load(tree, treeNode, resolve){
           console.log(tree);
           setTimeout(() => {
              const params = {
               //例如：需要传入的参数
                id:"这个id传的就是你点击第一层懒加载下的id参数-tree.id"
              }
              getList(params).then(res=>{
                  resolve(this.tableData1 = res.你接口里面的数据)
              })
        }, 1000) 
       }
    }
}