vue的横向树形菜单

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

树形插件的定义

<el-treeclass="tree-style":data="userAuthTree"show-checkboxnode-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>

内容区渲染的修改

// 内容区渲染后执行 判断底层 赋 classrenderContent(h, { node, data, store }) {let classname = "";// 第三层节点添加classNameif (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;
}

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

vue的横向树形菜单相关推荐

vue+ElementUI的树形菜单背景颜色修改
前言最近开发项目遇到一个问题,就是原型图中树形菜单背景颜色是透明的但是默认的树形菜单背景颜色是白色的,用style更改不了背景颜色,最后找到了解决办法. 解决办法根据项目路径F:\project\ ...
ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable. vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件.支持拖拽排序.固定表头.拖拽 ...
vue树形权限菜单_Vue.js 递归组件实现树形菜单（实例分享）
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...
vue 递归组件多级_Vue 递归组件构建一个树形菜单
原标题:Vue 递归组件构建一个树形菜单 Vue.js 中的递归组件是一个可以调用自己的组件例如: Vue.component('recursive-component', { template: ` ...
vue树形权限菜单_Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. main.js 作为入口: import Vue from 'vue' import main from './components/ ...
Vue封装树形菜单组件
csdn终于更新完成了哈,ok,步入正题像这种树形结构的核心思想就是:递归思想,知道使用递归,其实这个例子函数的封装也就很简单喽实现步骤: 设置的props: ...
vue横向树结构_基于vue.js实现树形表格的封装
基于vue.js实现树形表格的封装(vue-tree-table) 前言由于公司产品(基于vue.js)需要,要实现一个树形表格的功能,百度.google找了一通,并没有发现很靠谱的,也不是很灵活.所 ...
Unity 引擎UGUI之自定义树形菜单（TreeView）
先上几张效果图: 如果你需要的也是这种效果,那你就来对地方了! 目前,我们这个树形菜单展现出来的功能如下: 1.可以动态配置数据源: 2.点击每个元素的上下文菜单按钮(也就是图中的三 ...
Element(3) 使用v-org-tree组件实现组织树形菜单
一.前言 iview-admin中提供了 v-org-tree 这么一个vue组件可以实现树形菜单,下面小编来提供一下在element-ui中的使用教程小编集成了el-dropdown下拉菜单(鼠标 ...

vue的横向树形菜单

vue的横向树形菜单相关推荐

最新文章

热门文章