vue树形结构 怎么把 子级 中的name的值 展示在 子级上面

如果你使用的是 Element UI 中的 ElTree 组件，可以通过更改节点的 slot-scope 来自定义节点的显示内容。具体做法如下：

1. 在 ElTree 的 data 数组中，每个节点都应该包含一个 label 属性，用于展示节点的文本内容。可以通过节点的 slot-scope 属性来获取节点数据，然后将 name 值和子节点渲染出来：

<template>
  <el-tree :data="treeData" :props="defaultProps">
    <template slot-scope="{ node, data }">
      <div class="tree-node">
        <div class="tree-node__label">{{ data.name }}</div>
        <div class="tree-node__children">
          <el-tree-node v-for="child in data.children" :key="child.id" :node="child"></el-tree-node>
        </div>
      </div>
    </template>
  </el-tree>
</template>

2. 在组件的 style 中添加样式，用于布局和美化节点的显示效果：

<style>
.tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tree-node__label {
  padding: 10px;
}

.tree-node__children {
  margin-top: 10px;
  width: 100%;
}
</style>

这样，就可以将子级中的 name 值展示在子级上方了。具体效果可以看下面的示例图：