element-ui tree某些特定节点横向排列解决方案

不多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节点之后调用