element帶線樹

主要就是這種樣式     

 

是用的elementui裏的el-tree 然後通過僞類的編輯獲得當前樹

代碼：（/deep/放在.vue文件會報錯，可以提出來css）

<template>
  <div>
    <div class="hello">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        default-expand-all
        :expand-on-click-node="false">
      </el-tree>
    </div>
  </div>
</template>
<style lang="scss" scoped>
/deep/ .hello {
  .el-tree > .el-tree-node > .el-tree-node__content:first-child {
    &::before,
    &::after {
      border: none;
    }
  }
  .el-tree-node .el-tree-node__content {
    height: 30px;
    &::before,
    &::after {
      content: "";
      position: absolute;
      right: auto;
    }
    &::before {
      border-left: 1px solid #e6e6e6;
      bottom: 50px;
      height: 100%;
      top: 0;
      width: 1px;
      margin-left: -5px;
      margin-top: -15px;
    }
    &::after {
      border-top: 1px solid #e6e6e6;
      height: 20px;
      top: 14px;
      width: 10px;
      margin-left: -5px;
    }
  }
  .el-tree .el-tree-node {
    position: relative;
  }
}
</style>
<script>
export default {
  name: 'hello',
  data () {
    return {
      treeData: [
        {
          id: 1,
          name: '技術部',
          level: 1,
          child: [
            {
              id: 2,
              name: '運維組',
              level: 2,
              child: [
                {
                  id: 3,
                  name: '測試',
                  level: 3,
                  child: [
                    {
                      id: 4,
                      name: '前端',
                      level: 4,
                      child: [
                        {
                          id: 4,
                          name: '前端',
                          level: 4
                        }
                      ]
                    }
                  ]
                },
                {
                  id: 4,
                  name: '前端',
                  level: 4
                }
              ]
            },
            {
              id: 4,
              name: '測試組',
              level: 2,
              child: []
            }
          ]
        }
      ],
      defaultProps: {
        children: 'child',
        label: 'name'
      }
    }
  }
}
</script>