vue3 el-tree左侧加线

在Vue3中，如果你想要在`el-tree`组件的左侧添加一条边线（通常用于表示层次结构），可以借助自定义节点渲染函数（render-node）或者CSS样式来自定义。以下是基本步骤：

**1. 使用render-node属性**
在`el-tree`组件的props中，你可以提供一个render-node函数，这个函数会接收当前节点的信息并返回HTML元素。你可以在这个函数中添加额外的HTML元素，比如一个带有边线的`<span>`。

<el-tree
  :data="treeData"
  :render-node="(h, node) => {
    return h('li', [
      h('span', { style: 'border-left: 1px solid #ccc;' }, node.label), // 添加边线
      node.children ? h('ul', node.children) : null
    ]);
  }}"
></el-tree>

**2. 使用CSS样式覆盖**
如果你想全局控制所有`el-tree`的边线样式，可以在样式表中为`.el-tree-node__label`选择器添加边线样式。例如：

.el-tree-node__label {
  position: relative;
  padding-left: 10px; /* 添加适当的左内边距 */
}

.el-tree-node__label::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 100%;
  background-color: #ccc;
  position: absolute;
  left: 0;
}

记得替换`#ccc`为你需要的颜色值。