el-tree叶子节点横向排列

需求：底层节点横向排列

解决想法来自博客： https://blog.csdn.net/weixin_45899022/article/details/104607542
但具体实现有所不同

上述博文直接给出了源代码，这里直接调重点以及加点个人的想法进来：

首先说一下这里难以解决的点及解决思路：

​ el-tree组件元素嵌套层数多，而对外暴露的唯一元素是最里层的，所以我们去修改我们放在插槽里的东西的样式的时候影响不到外面，而CSS是不支持向上访问的( 那很容易乱套 )，所以我们只能求助与JS去获取父元素来完成这个需求。

​ 然后我们需要去判别元素是否位于底层，但是经尝试、发现在前端去判断层数效率相当低下且复用性很不好，建议还是在后端加一个字段去控制某一层是否需要横向排列。

这里我用到的字段是data上的is_row,值为boolean类型，为true时横向排列，为false时原生排列

// 附上data格式：
 data: [
        {
          id: 1,
          name: '一级 1',
          is_row: false,
          children: [
          	{
          		id: 11,
         		 	name: '二级 1',
          		is_row: true,
          	}]
        }]

于是借助开头连接对应的博客，有以下解决方法：

// 在tree插槽中进行class添加：
  <el-tree
    ref="tree"
    :data="data"
    :props="{ label: 'name' }"
    default-expand-all
    :show-checkbox="needCheck"
    node-key="id"
  >
    <div
      slot-scope="{ node, data }"
      :class="data.is_row ? 'need-float' : ''"
    >
      <!-- 真的需要在前端控制层数的话可以在class中判断node.level的值，e.g:
				<div
      		slot-scope="{ node, data }"
      		:class="node.level===3 ? 'need-float' : ''"
    		>
   				{{ node.label }}
    		</div>

					判断情况更为复杂的时候可以  :class="getClass(node)"  然后在js中进行判断复制，这就不再赘述啦
					但还是建议将控制参数交给后端 ， 兼容性相对强不少，多少层都OK，那层需要加哪里			
				-->

      {{ node.label }}
    </div>
  </el-tree>

// 在methodes中定义一个控制样式的方法：
// 修改叶子节点样式
    changeStyle() {
      var leafNode = document.getElementsByClassName('need-float');
      for (var i = 0; i < leafNode.length; i++) {
        leafNode[i].parentNode.style.cssFloat = 'left';
      }
    },
    
//在mounted中调用该方法：
    this.changeStyle();