VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线_两个el-tree的循环遍历(2)

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

                  // label: '页面查看权限'
                  // }
                  // ]
                },
                {
                  id: 7,
                  label: '查询',
                  // children: [
                  // {
                  // id: 7,
                  // label: '页面查看权限'
                  // }
                  // ]
                }
              ]
            }
          ]
        },
        {
          id: 111,
          label: '销售管理',
          children: [
            {
              id: 112,
              label: '订单管理',
              children: [
                {
                  id: 113,
                  label: '列表查看'
                },
                {
                  id: 114,
                  label: '查询'
                },
                {
                  id: 114,
                  label: '重置'
                },
                {
                  id: 114,
                  label: '复选框'
                },
                {
                  id: 114,
                  label: '新增订单'
                },
                {
                  id: 114,
                  label: '导出'
                },
                {
                  id: 114,
                  label: '打印'
                },
                {
                  id: 114,
                  label: '操作'
                },
                {
                  id: 114,
                  label: '订单详情'
                },
                {
                  id: 114,
                  label: '编辑'
                },
                {
                  id: 114,
                  label: '作废'
                },
                {
                  id: 114,
                  label: '出库'
                },
                {
                  id: 114,
                  label: '结束'
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  defaultProps: {
    children: 'children',
    label: 'label'
  }
}

}

**js部分：**

mounted() {
this.changeCss() //默认调用此方法将子节点渲染为横向排列
},

methods: {
handleExpand() { // 节点被展开时触发的事件
// 因为该函数执行在renderContent函数之前，所以得加this.$nextTick()this.$nextTick(() => {
this.changeCss()
})
},
renderContent(h, { node, data, store }) { // 树节点的内容区的渲染 Function
let classname = ‘’
// 由于项目中有三级菜单也有四级级菜单，就要在此做出判断
if (node.level === 4) {
classname = ‘foo’
}
if (node.level === 3 && node.childNodes.length === 0) {
classname = ‘foo’
}
return h(
‘p’,
{
class: classname
},
node.label
)
},
changeCss() { //将子节点横向排列方法
var levelName = document.getElementsByClassName(‘foo’) // levelname是上面的最底层节点的名字
for (var i = 0; i < levelName.length; i++) {
// cssFloat 兼容 ie6-8 styleFloat 兼容ie9及标准浏览器
levelName[i].parentNode.style.cssFloat = ‘left’ // 最底层的节点，包括多选框和名字都让他左浮动
levelName[i].parentNode.style.styleFloat = ‘left’
levelName[i].parentNode.onmouseover = function() {
this.style.backgroundColor = ‘#fff’
}
}
}
}

**指示线样式部分：**