element ui中tree的问题，改变最底层节点的样式，使他横着排列

想要实现这种平铺，切不拖动的情况下可以使用element ui 中的tree中自带的这个
:render-content=“renderContent” //树节点的内容区的渲染 。把最底层节点加在这里这个属性来实现

renderContent(h, { node, data }) {
      let className = '';
      if (node.level == 3) {
        className = 'threeFuse';
      }
      return <span class={className}>
        {data.label}</span>
    },

然后再mouted中遍历当前加入的threeFuse这个dom元素，这样就可以实现了

mounted() {
    this.$nextTick(() => {
      var threeFuse= document.getElementsByClassName('threeFuse');
      for (var i = 0; i < threeFuse.length; i++) {
		threeFuse[i].parentNode.style.cssFloat = 'left';
        threeFuse[i].parentNode.style.styleFloat = 'left';
      }
    })
  },

下面在说说加了拖拽效果，还要实现横向排版的布局问题，在做这个过程中我一开始也是按照上面实现了，但是有个问题，浮动，你从其他节点拖拽过去后，会在你放置的节点位置形成竖状结构，或者有时候会出现，单排超出当前盒子，导出文字看不到，然后我就想能用弹性布局吗，试了一下可以，设置display:flex flex-flow:wrap是可以实现的

this.$nextTick(() => {
      var threeLeftName = document.getElementsByClassName('threeLeft');
      for (var j = 0; j < threeLeftName.length; j++) {      //设置右边的样式
        threeLeftName[j].parentNode.parentNode.parentNode.style.display = 'flex'
        threeLeftName[j].parentNode.parentNode.parentNode.style.flexFlow = 'wrap'
      }
    })

但是bug就来了，当你点击tree自带的下拉箭头那个展开时就又变回原来的竖状结构了，好吧，又得看它的方法，发现有个node-expand这个方法，在里面加弹性布局样式，加了不生效，用nextTick和 forceUpdate去更新发现并没有用，然后我又用延时了一下发现可以了，但是出现了回弹问题，这个问题的引起不知道是不是过渡引起的问题，目前没时间研究了，后续有时间研究一下，现在补上出现问题的图片

nodeExpand(obj, node, event) {
      if (node.level == 3) {
        setTimeout(() => {
          event.$el.lastElementChild.style.display = 'flex'
          event.$el.lastElementChild.style.flexFlow = 'wrap'
        })
      }
    },

最后补上解决方法
直接用样式给他写成浮动就好了，如果你是要第四层横向排版的话在加一个 .el-tree-node__children 就可以了，我这个是第三层设置的，这样的话前面也就不需要 :render-content 和 node-expand这2个方法了

 /deep/ .el-tree-node__children .el-tree-node__children .el-tree-node {
    float: left;
  }