不多BB先上效果图
先来个Element-UI的文档四连看
额。。。可以修改节点就好解决了(战术后仰)
后端返回的数据
在这里可以看到普通节点和功能节点之间的区别是一个perms为空 一个是有数据的（我们可以用这个来区分节点），然后根据节点来改样式
主要代码
//修改节点Dom
renderContent(h, { node, data }) {
let className = ''
// perms这个是后台数据区分普通tree节点和横向tree节点的标志 各位要根据实际情况做相对应的修改
if (data.perms && data.perms !== '1') {
className = 'especially'
}
return (
// 在需要做横向排列的模块做标记
<div class={className}>
{data.label}
</div>)
},
// 改变tree节点样式
changeTreeClass() {
// 找到之前做标记的class
var classDomList = document.getElementsByClassName('especially')
// 改变这几个样式
for (var i = 0; i < classDomList.length; i++) {
classDomList[i].parentNode.style.cssText = 'float: left'
classDomList[i].parentNode.className = 'el-tree-node__content option-wrapper'
classDomList[i].parentNode.parentNode.parentNode.style.marginLeft = '70px'
}
}
// changeTreeClass()这个方法要在渲染完tree节点之后调用
// 需要添加的全局样式
.option-wrapper { padding: 0 !important; }
好了，到了这一步基本完成了。说下要注意的点吧！
1.数据节点的判别方法不一样，要根据不同的数据来选择区分方式。
2.判断节点方式一定要唯一，不唯一的话可能会造成多层节点重叠的情况发生。
3.changeTreeClass()这个方法要在渲染完tree节点之后调用
