el-tree组件增加结构线(element-ui)

结果预览

代码

    <template>
       <el-tree
          :indent="0"
          :data="data"
          :props="defaultProps"
       ></el-tree>
    </template>
    
    <script>
        export default {
          data() {
            return {
              data: [
                {
                  label: '一级 1',
                  children: [
                    {
                      label: '二级 1-1',
                      children: [
                        {
                          label: '三级 1-1-1',
                        },
                      ],
                    },
                    {
                      label: '二级 1-1',
                      children: [
                        {
                          label: '三级 1-1-1',
                        },
                      ],
                    },{
                      label: '二级 1-1',
                      children: [
                        {
                          label: '三级 1-1-1',
                        },
                      ],
                    },
                  ],
                },
              ],
              defaultProps: {
                children: 'children',
                label: 'label',
              }
            }
          }
        }
        </script>

        <style lang="scss" scoped>
        .el-tree {
          /deep/ .el-tree-node {
            position: relative;
            padding-left: 16px;
            &::before {
              content: '';
              width: 1px;
              height: 100%;
              border-left: 1px dashed red;
              position: absolute;
              left: -4px;
              top: -26px;
            }
            &::after {
              content: '';
              width: 24px;
              height: 20px;
              border-top: 1px dashed red;
              position: absolute;
              top: 12px;
              left: -4px;
            }
            &:last-child:before {
              height: 38px;
            }
            .el-tree-node__children {
              padding-left: 16px;
            }
            .el-tree-node__expand-icon.is-leaf {
              display: none;
            }
          }
          
          /deep/ & > .el-tree-node:before {
            border-left: none;
          }
          /deep/ & > .el-tree-node:after {
            border-top: none;
          }
        }
        </style>

*注意: el-tree组件属性indent缩进要改为0,默认是16和结构线会有距离 (:indent="0")

来看看大佬们怎么做的

1.封装el-tree npm引入 juejin.cn/post/702473…

2.css方式 zhuanlan.zhihu.com/p/149243311