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;}