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

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