element中的横线_element-ui tree添加提示线

要在 Element UI 中的 Tree 组件中添加提示线，可以使用 tree 配置项的 `render-after-expand` 属性。这个属性可以自定义 Tree 组件节点的渲染方式，使得节点的样式可以进行更加精细的控制。

具体实现步骤如下：

1. 在 Tree 组件中设置 `render-after-expand` 属性为 true，即开启渲染节点的提示线。

2. 在 Tree 组件中定义 `render-content` 插槽，自定义每个节点的渲染方式。

3. 在 `render-content` 插槽的渲染函数中，使用 `v-if` 条件渲染来控制是否需要渲染提示线。

4. 在渲染函数中，使用 `v-show` 条件渲染来控制提示线的显示与隐藏。

以下是一个简单的示例代码，实现了在 Tree 组件中添加提示线：

<template>
  <el-tree
    :data="data"
    :render-after-expand="true"
  >
    <template #render-content="{ node, data }">
      <span class="tree-node">
        {{ node.label }}
        <span
          class="tree-line"
          v-show="data.length > 0 && !node.isLeaf"
        ></span>
      </span>
    </template>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                { label: '三级 1-1-1' },
                { label: '三级 1-1-2' },
              ],
            },
            {
              label: '二级 1-2',
              children: [
                { label: '三级 1-2-1' },
                { label: '三级 1-2-2' },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

<style>
.tree-node {
  position: relative;
  padding-left: 20px;
}

.tree-line {
  position: absolute;
  left: 0px;
  top: 50%;
  width: 20px;
  height: 1px;
  background-color: #c8c8c8;
  transform: translateY(-50%);
}
</style>

在这个示例代码中，我们在 `render-content` 插槽中自定义了节点的渲染方式，使用了 `v-show` 条件渲染来控制提示线的显示与隐藏。同时，我们还定义了 `.tree-node` 和 `.tree-line` 两个样式类，来控制节点和提示线的样式。