element-ui tree 虚线连接树

虚线树形

Dmeo

<template>
  <div class="tree-container">
    <el-tree node-key="id"
             @node-click="nodeSelect"
             class="tree filter-tree"
             :data="treeData"
             :props="defaultProps"
             default-expand-all
             :filter-node-method="filterNode"
             ref="treeData">
      <span class="custom-tree-node"
            slot-scope="{ node }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text"
                     style="font-size: 16px; color: #1890ff"
                     size="mini"
                     @click.stop="
							handleCreate(
								node.key,
								'create',
								node.label,
								node.parent.label,
								node.parent.key,
								node
							)
						">
            <i style="font-weight: bold"
               class="el-icon-plus"></i>
          </el-button>
          <el-button type="text"
                     style="font-size: 16px; color: #1890ff"
                     size="mini"
                     @click.stop="
							handleCreate(
								node.key,
								'update',
								node.label,
								node.parent.label,
								node.parent.key,
								node
							)
						">
            <i style="font-weight: bold"
               class="el-icon-edit-outline"></i>
          </el-button>
          <el-button type="text"
                     style="font-size: 16px; color: #1890ff"
                     size="mini"
                     @click.stop="deleteById(node.key, node.label)">
            <i style="font-weight: bold"
               class="el-icon-minus"></i>
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'Tree_demo',
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '所有分类',
          children: [
            {
              id: 2,
              name: '分类1',
              children: [
                {
                  id: 3,
                  name: '分类1-1',
                  children: [],
                },
              ],
            },
          ],
        },
      ],
      // 配置树形图
      defaultProps: {
        children: 'children',
        label: 'name',
      },
    }
  },

  methods: {
    nodeSelect(data) {
      console.log(data)
      this.getDataList(data.id)
      this.classifyId = data.id
      this.pId = data.id
      this.pName = data.name
    },
    // 过滤树
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 新增修改
    handleCreate(id, type, name, pName, pId, node) {
      console.log(id, type, name, pName, pId, node)
      this.classAddOrUpdateVisible = true
      this.$nextTick(() => {
        // 新增弹窗
        // this.$refs.classAddOrUpdate.init(id, type, name, pName, pId, node)
      })
    },
    // 获取数据列表
    getDataList() {},
    // 删除
    deleteById() {},
  },
}
</script>
<style scoped >
.tree-container {
  width: 300px;
  overflow: auto;
  border: 1px solid #ccc;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #f1f4f5;
}
.classTitle {
  padding-left: 10px;
  width: 100%;
  height: 42px;
  background-color: #fafafa;
  line-height: 42px;
  font-weight: bold;
}
.el-form .el-form-item {
  margin: 0px 0 !important;
}
.tree-menu {
  width: 200px;
  height: 300px;
  overflow: auto;
}

.tree {
  display: inline-block;
  min-width: 100%;
}

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

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

.tree /deep/ .el-tree-node :last-child:before {
  height: 38px;
}

.tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree /deep/ .el-tree-node:before {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree /deep/ .el-tree-node:after {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
.tree /deep/ .el-tree-node__expand-icon.is-leaf {
  display: none;
}

.tree /deep/ .el-tree-node:before {
  border-left: 1px dashed #b8b9bb;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.tree /deep/ .el-tree-node:after {
  border-top: 1px dashed #b8b9bb;
  height: 20px;
  top: 12px;
  width: 24px;
}

.tree /deep/ .el-tree-node__content {
  padding-left: 0 !important;
}

.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before {
  /* background: url("../../../../assets/img/plus.png") no-repeat 0; */
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  font-size: 18px;
  background-size: 18px;
}
.el-tree .el-tree-node__expand-icon.expanded .el-icon-caret-right:before {
  /* background: url("../../../../assets/img/minus.png") no-repeat 0 ; */
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  font-size: 18px;
  background-size: 18px;
}
</style>