el-tree树结构添加指引线

在Element UI的el-tree组件中添加指引线，可以通过自定义节点内容并使用CSS来实现。以下是一个简单的示例，展示了如何在树节点之间添加指引线：

1. 在el-tree中使用render-content来自定义节点渲染。
2. 使用CSS来画线，线的位置需要通过计算节点的位置来确定。

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    :render-content="renderContent"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // ...树的数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    renderContent(h, { node, data, store }) {
      // 渲染节点内容
      return (
        <span>
          {node.label}
          {this.renderGuideLine(h, store, node)}
        </span>
      );
    },
    renderGuideLine(h, store, node) {
      // 判断是否为父节点，如果是，则渲染指引线
      if (node.childNodes && node.childNodes.length > 0) {
        const parent = node.parent;
        if (parent) {
          // 计算指引线的位置
          const parentNode = store.getNode(parent);
          const { y: parentY } = parentNode.getNodeElement().getBoundingClientRect();
          const { y } = node.getNodeElement().getBoundingClientRect();
          const halfHeight = (y - parentY) / 2;
 
          return (
            <div
              style={{
                position: 'absolute',
                top: `${parentY + halfHeight}px`,
                left: '-20px',
                height: '1px',
                width: '10px',
                backgroundColor: 'black'
              }}
            ></div>
          );
        }
      }
      return null;
    }
  }
};
</script>
 
<style scoped>
/* 这里可以添加更多的CSS样式来优化指引线的样式 */
</style>

在上面的代码中，renderContent方法用于自定义节点内容，并调用renderGuideLine方法来渲染指引线。指引线是通过一个div元素绘制的，其位置通过计算父节点和当前节点在屏幕上的位置来确定。

请注意，这个示例使用了Vue的渲染函数h来创建元素，并且假设您已经在项目中包含了Element UI。实际使用时，您可能需要根据自己项目的具体情况调整样式和计算位置的逻辑。