el-tree 组件自定义样式 最后一级flex，其余级别正常block

先上需求的效果图

el-tree的样式一般全都是block换行的，如下图

先分析一下，
1.树结构的级别是不确定的，但是样式上要求最后一个层级需要横着排列，其余竖着排，超出需要换行
2.如何找到每一个数据项的最后一级呢？
3.找到之后怎么办？

ok,then,
1.先通过插槽吧，因为这样咱们可以自定义最后一个节点的样式，加一个类名作为标识。在methods里面加一个判断是否最后一级的函数，是最后一级则加类名，否则正常显示

<el-tree :data="chanelItemList" show-checkbox default-expand-all node-key="id" ref="tree" :highlight-current="false"
    :props="defaultProps" :expand-on-click-node="false" :check-on-click-node="true"
    :default-checked-keys="defaultCheckedKeys">
    <template #default="{ node, data }">
          <div v-if="isLastLevelNode(node)" class="last-level-node">
               <span class="el-tree-node__label">{{ data.label }}</span>
          </div>
               <span v-else>{{ data.label }}</span>
     </template>
  </el-tree>

isLastLevelNode(node) {
     // 检查当前节点是否为最后一级
     return !node.data.children || node.data.children.length === 0;
},

2.通过浏览器编译后，可以看到这个类名标识，且能够反向找到需要改成横着拍的元素，如图：
需要修改的是这个span的父级的父级的父级的样式

3.通过js来做行内样式修改，继续在methods里面加一个方法

addClass() {
      // 获取所有最后一级节点对应的 .el-tree-node__children 元素
      document.querySelectorAll('.last-level-node').forEach(function (element) {
        // 获取 .el-tree-node__children 元素
        const childrenElement = element.parentNode.parentNode.parentNode;
        // 添加 display: flex; 的行内样式
        childrenElement.style.display = 'flex';
        childrenElement.style.flexWrap = 'wrap'; 
        childrenElement.style.flexDirection = 'row'; // 可选：明确指定水平方向
        childrenElement.style.alignItems = 'center'; // 可选：对齐方式
      });
    }
在钩子函数中调用一下
created() {
    this.$nextTick(() => {
      this.addClass()
    })
  }

然后就ok啦~~~