elementui 树形表格 子项使用插槽

Element UI 的树形表格组件是一个用于展示层级结构的数据列表，它的设计非常直观且易于使用。当你需要在每个节点的子项部分自定义内容时，可以利用 Vue 中的插槽（slot）功能。

在 Element UI 的 `el-tree` 组件中，你可以创建一个名为 `default` 的插槽，并将其放在需要替换子项的地方。例如：

<template>
  <el-tree
    :data="treeData"
    default-expand-all
    node-key="id"
    :props="defaultProps"
    @node-click="handleNodeClick">
    <span slot-scope="{ node, $index }">
      <!-- 默认显示节点的文字 -->
      {{ node.label }}
      
      <!-- 这里插入自定义内容的插槽 -->
      <template slot="default">
        <div v-if="node.children">
          <!-- 使用递归遍历子节点并显示自定义内容 -->
          <el-tree-node v-for="(child, index) in node.children" :key="child.id" :node-data="child">
            <!-- 插值表达式或者其他 Vue 渲染逻辑 -->
            {{ child.label }}
          </el-tree-node>
        </div>
      </template>
    </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: ...,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  methods: {
    handleNodeClick(node) {
      // 点击事件处理逻辑
    }
  }
};
</script>

在这个例子中，`slot="default"` 部分就是你放置自定义内容的地方。当你有子节点时，会渲染出递归遍历的子节点内容。你可以根据实际需求添加或修改这部分的内容。