el-tree创建结构线，并且可拖动

el-tree结构线可拖拽

目录

1.引入el-tree

2. 添加树结构数据

3.添加样式

---

1.引入el-tree

    <el-tree
      class="tree"
      :data="data"
      node-key="id"
      default-expand-all
      draggable>
    </el-tree>

2. 添加树结构数据

<script>
export default {
  name: 'App',
  data() {
    return {
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2',
          children: [{
           id: 11,
            label: '三级 3-2-1'
          }, {
            id: 12,
            label: '三级 3-2-2'
          }, {
            id: 13,
            label: '三级 3-2-3'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
}
</script>

3.添加样式

<style scoped lang="scss">
	html, body {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	#app {
		display: flex;
		 width: 100%;
		 height: 100%;
		 justify-content: center;
     padding-top: 200px;
	}
  ::v-deep .tree {
    & > .el-tree-node:after {
      border-top: none;
    }

    .el-tree-node {
      position: relative;
      padding-left: 16px;
    }

    .el-tree-node__children {
      padding-left: 16px;
    }

    //  去掉根节点垂直线
    & > .el-tree-node:before {
      border-left: none !important;
    }

    //  去掉根节点水平线
    & > .el-tree-node:after {
      border-top: none !important;
    }

    //  垂直线
    .el-tree-node:before {
      content: "";
      left: -2px;
      position: absolute;
      border-left: 1px dashed #bbbfc2;
      bottom: 0px;
      height: 100%;
      width: 1px;
    }

    //  同级最后一个节点垂直线高度
    .el-tree-node :last-child:before {
      height: 8px;
      top: 2px;
    }

    //  水平线
    .el-tree-node:after {
      content: "";
      left: -2px;
      position: absolute;
      border-top: 1px dashed #bbbfc2;
      height: 20px;
      top: 12px;
      width: 24px;
    }

    //  旋转展示时图标
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    //  展示时图标
    .el-icon-caret-right:before {
      content: "\e783";
      font-size: 18px;
      color: #8ea3b8;
    }

    //  折叠时图标
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      content: "\e781";
      font-size: 18px;
      color: #8ea3b8;
    }

    //  叶子节点图标
    .el-tree-node__expand-icon.is-leaf:before {
      content: "";
    }

    .el-tree-node__content > .el-tree-node__expand-icon {
      padding: 2px;
    }

    .el-tree-node__content {
      padding-left: 10px !important;
    }
  }
</style>