vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线

组件库的el-tree样式

由于基础版的样式不满足当前的ui设计，所以对el-tree做一下样式改造 参考的博客
并做了一部分优化，目前呈现样式如下：

代码具体实现

1、template模板引入el-tree组件，注意点需要设置:indent=“0”，不然每层树padding-left呈18px的倍数增加

<div class="mytree">
          <el-tree :indent="0" :data="data" :props="defaultProps" @node-click="handleNodeClick" />
</div>

2、setup方法中声明变量和方法

setup() {
	const state = reactive({
		data: [
        {
          label: 'Level one 1',
          children: [
            {
              label: 'Level two 1-1',
              children: [
                {
                  label: 'Level three 1-1-1',
                },
              ],
            },
          ],
        },
        {
          label: 'Level one 2',
          children: [
            {
              label: 'Level two 2-1',
              children: [
                {
                  label: 'Level three 2-1-1',
                },
              ],
            },
            {
              label: 'Level two 2-2',
              children: [
                {
                  label: 'Level three 2-2-1',
                },
              ],
            },
          ],
        },
        {
          label: 'Level one 3',
          children: [
            {
              label: 'Level two 3-1',
              children: [
                {
                  label: 'Level three 3-1-1',
                },
              ],
            },
            {
              label: 'Level two 3-2',
              children: [
                {
                  label: 'Level three 3-2-1',
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      }
	})
	const handleNodeClick = (data: any) => {
      console.log(data)
    }
    return {
      ...toRefs(state),
      handleNodeClick
    }
}

3、主要代码实现在css部分，该项目使用scss，deep深度选择器使用如下方式，css代码如下

<style lang="scss" scoped>
:deep(.mytree) {
  .el-tree-node {
    position: relative;
    padding-left: 32px;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }
  
.el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  
  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
    border-left: 1px dashed #1389bc;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
    border-top: 1px dashed #1389bc;
    height: 20px;
    top: 12px;
    width: 18px;
  }
  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-tree .el-icon-caret-right:before {
    content: "\e723";
    font-size: 16px;
    color: #1389bc;
    position: absolute;
    left: -20px;
    top: -8px;
  }
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: "\e722";
    font-size: 16px;
    color: #1389bc;
    position: absolute;
    left: -20px;
    top: -8px;
  }
  .el-tree-node__expand-icon.is-leaf:before {
    content: "\e722";
    font-size: 16px;
    color: #1389bc;
    position: absolute;
    left: -20px;
    top: -8px;
  }
  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 0;
  }
}
</style>