el-table遍历加载子节点，回显

在Vue.js中，`el-table` 是 Element UI 提供的一个用于展示表格的数据组件。当需要通过递归遍历数据并加载子节点时，通常会结合 `v-for` 指令和异步请求（比如 `axios` 或者 `fetch`）来实现。

假设你有一个层级结构的数据对象：

data() {
  return {
    treeData: [
      { id: '1', name: '父节点1', children: [] },
      { id: '2', name: '父节点2', children: [{ id: '2-1', name: '子节点1', children: [] }] }
    ]
  };
}

你可以这样做：

<template>
  <el-table :data="treeData">
    <el-table-column prop="name" label="名称"></el-table-column>
    <!-- 使用递归插件（如element-ui的el-tree组件）或者自定义模板 -->
    <template v-if="item.children.length > 0">
      <el-table-column type="expand">
        <template slot-scope="{ row }">
          <ul>
            <li v-for="child in row.expandedRows" :key="child.id">{{ child.name }}</li>
          </ul>
        </template>
      </el-table-column>
    </template>
    <!-- 如果子节点是动态加载的，可以使用 v-loading 或者 async-render 函数 -->
    <el-table-column v-if="!row.loading" label="子节点">
      <template slot-scope="scope">
        <button @click="loadChildren(scope.$index, scope.row)">加载子节点</button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
methods: {
  loadChildren(index, row) {
    this.$axios.get(row.id + '/children')
      .then(response => (row.children = response.data))
      .catch(error => console.error('加载子节点失败', error));
  }
}
</script>

在这个例子中，当你点击“加载子节点”按钮时，`loadChildren` 方法会被触发，从服务器获取子节点数据，并更新对应行的 `children` 属性。`expandedRows` 则用于展开和收起子节点。