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

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

组件库的el-tree样式

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

代码具体实现

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

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代码如下