vue数据大屏要求，树状图进行连线效果。在github上找到了一个相对符合要求的插件，
element-tree-line

插件使用

安装依赖

# npm
npm install element-tree-line -S

# yarn
yarn add element-tree-line -S

注册使用

// 全局注册组件
import Vue from 'vue';
import ElementTreeLine from 'element-tree-line';
// css
import 'element-tree-line/dist/style.css';
// or scss
// import 'element-tree-line/dist/style.scss';

Vue.component(ElementTreeLine.name, ElementTreeLine);

// or 局部注册组件
import ElementTreeLine from 'element-tree-line';
// css
import 'element-tree-line/dist/style.css';
// or scss
// import 'element-tree-line/dist/style.scss';

export default {
    components: { ElementTreeLine },
    data() {
        return {};
    },
};

实例代码

实例代码，简单记录一下

<el-tree
node-key="id"
:data="organizationTree"
:props="defaultProps"
:default-expand-all="true"
:default-expanded-keys="expandedKeys"
:default-checked-keys="checkedKeys"
@node-click="handleNodeClick">
<template v-slot:default="{ node,data }">
  <element-tree-line
    :node="node"
    :showLabelLine="true"
    :indent="10"
  >
    <template v-slot:node-label>
      <i
        :class="['fa', {'icon0' : treeLeaf(data)==1,'icon1': treeLeaf(data)==2,'icon2': treeLeaf(data)==3}]"
        class="mr10"></i>
      <span style="font-size: 14px">{{ node.label }}</span>
    </template>
    <template v-slot:after-node-label>
      <i style="padding-right: 10px" @click.stop="getEdit(node,data)" class="el-icon-edit-outline ml10"></i>
    </template>
  </element-tree-line>
</template>
</el-tree>

js

defaultProps: {
    children: 'childList',
    label: 'name',
    isLeaf: (data, node) => {
      if (node.level === 2) {
        return true
      }
    },
},

css

自定义样式

::v-deep {
  /* 设置树形最外层的背景颜色和字体颜色 */
  .el-tree {
    color: rgba(0, 172, 255, 1);
    background: transparent;
    width: calc(100% - 40px);
    margin-left: 20px;
    font-size: 16px;
  }

  .is-leaf::before {
    display: none;
  }

  .el-tree > .el-tree-node > .element-tree-node-line-ver {
    display: none;
  }

  .element-tree-node-label-line {
    display: none;
  }

  .custom-tree-node {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    span {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }
  }

  /* 设置三角形图标的颜色 */
  .el-tree-node__expand-icon {
    color: rgba(0, 172, 255, 1);
  }

  /* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */
  .el-tree-node__content:hover .el-tree-node__expand-icon {
    color: rgba(0, 164, 255, 1);
    font-size: 16px;
    font-family: PingFang;
    font-weight: 400;
    color: #00ACFF;
  }

  /* .el-tree-node__content:hover .el-tree-node__expand-icon.is-leaf {
    color: transparent;
  } */

  /* 树节点鼠标悬浮式改变背景色，字体颜色 */
  .el-tree-node__content:hover {
    background: none;
    color: rgba(0, 164, 255, 1);
  }

  .is-current .ellipsis {
    color: rgba(72, 231, 250, 1);
  }

  /* 改变节点高度 */
  .el-tree-node__content {
    height: 36px;
  }

  /* 节点前边的三角图标并不会被节点样式影响，需要单独修改 当前激活的颜色*/
  .el-tree-node:focus
  > .el-tree-node__content
  .el-tree-node__expand-icon {
    color: rgba(39, 114, 229, 1);
  }

  /* 改变被点击节点背景颜色，字体颜色 */
  .el-tree-node:focus > .el-tree-node__content {
    background: none;
    color: rgba(0, 164, 255, 1);
  }
}