vue的横向树形菜单

实现上图三级菜单横向展开的样式
使用element-ui的树形插件，其实实现上面的效果还是很简单的，只要动态的给三级节点加一下样式就可以了，可以看下下面的代码片段。

树形插件的定义

<el-tree
    class="tree-style"
    :data="userAuthTree"
    show-checkbox
    node-key="id"
    :props="defaultProps"
    ref="tree"
    :render-content="renderContent" // 使用render-content进行树节点内容区的渲染
    default-expand-all
    @check-change="handleCheckChange"
    :check-strictly="checkFlg"
    :default-checked-keys="defaultAuth"
  ></el-tree>

内容区渲染的修改

// 内容区渲染后执行 判断底层 赋 class
    renderContent(h, { node, data, store }) {
      let classname = "";
      // 第三层节点添加className
      if (node.level === 3) {
          classname = "levelname";
      }
      return <p class={classname}>{node.label}</p>;
    },

css样式树形

.tree-style .el-tree-node__children .el-tree-node__children .el-tree-node__content {
  float: left;
}

至此三级树形结构横向展示就实现了，有更好的方法欢迎大家评论讨论~~