vue+element实现树状菜单并底层菜单横向排列

参考博文：https://blog.csdn.net/qq_33769914/article/details/81562278
效果如下：

首先用elemnetUI的树形控件，将获取到的数据进行基本展示。
其次给他添加底层样式。
最后根据获取到的某一属性将其勾选。
代码如下：
第一步：
获取数据：

 getRoleFunction(postData).then(response => {this.allPriviegeData = JSON.parse((JSON.stringify(response.data).replace(/id/g, 'value')).replace(/name/g, 'label'))

上面，postData是参数，刚刚查看文档时候可以不用正则将id转为value，但name要转为label
第二步：
基本展示出树状菜单：

 <el-treeref="tree":loading="listLoading"    // 加载的动图:data="allPriviegeData" // 获取到的数据:render-content="renderContent" // 内容区的渲染class="treeFun" node-key="value" // 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的,这里的value相当于idshow-checkboxcheck-on-click-node // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。default-expand-all // 全部展开@check-change="checkChange" />

其中，checkChange方法是节点选中状态发生变化时的回调，emmmmm，文档中都有。
第三步：
渲染底层树状菜单使其横向排列（写在methods里面）：
1.内容区渲染加类名

// 内容区渲染后执行 判断底层 赋 classrenderContent(h, { node, data, store }) {let classname = ''if (node.level === 3) {classname = 'levelname'}// 由于项目中有二级菜单也有三级菜单，就要在此做出判断。if (node.level === 2 && node.childNodes.length === 0) {classname = 'levelname'}return (<p class={classname}>{node.label}</p>)},

2.给类名加样式（在你成功获取数据的方法里调用，最好加上setTimeout,否则可能不会实现效果）

changeCss() {var levelName = document.getElementsByClassName('levelname') // levelname是上面的最底层节点的名字for (var i = 0; i < levelName.length; i++) {// cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器levelName[i].parentNode.style.cssFloat = 'left' // 最底层的节点，包括多选框和名字都让他左浮动levelName[i].parentNode.style.styleFloat = 'left'}},

第四步：
有关数据的处理：
我们后台给我返回的数据里有check属性，若为true就展示。
但是当时测试这个树形控件的时候遇到了不少的问题，之一就是，为神马我已经给他赋值了他就是不展示呢，这算是其中之最，有两点需要注意：
1.赋值：
说起来真是一把辛酸泪，当时看前人博客时候还没想那么多，都是最后自己反复看文档摸索出来的。

特别注意！！！在element的树形控件赋值是这样的：

this.$refs['tree'].setCheckedKeys(this.allFunction) // this.allFunction是要选中的id的数组集合

或者是这样的：

<el-tree:data="data2"show-checkboxnode-key="id":default-checked-keys="[5,4,3,2,1]"  // 赋值呀:props="defaultProps">
</el-tree>

搞的我这个菜鸟真的是一点脾气都没有。不过做出来还是感觉超开心~
2.赋值也成功了，为啥还是不勾选
后台返给我的数据结构是这样的：

[{id: 1,level: 1,children: [{id: 2,level: 2,functionGroup: {id: 3}}]}]

当时商议好改变控件的勾选后提交给后台的要functionGroup中的id数组集合，所以一开始有点乱撞，用这个数组赋值，就是不出效果，后来才意识到，控件只认识从顶层到最后一级children的id。emmmm，还是要多试，且当时确实有点钻牛角尖。还好还好。
最后：
emmm，遇到问题还是得多从文档找答案，是我做完这个页面最直观的感受！
因为个人中心的不可改动我当时也是绕了弯路最后才在文档中找到了这个：

踩在巨人的肩膀上啊~

vue+element实现树状菜单并底层菜单横向排列相关推荐

vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
下拉框_教你封装 Element Tree 树状下拉框
在日常项目开发中,树状下拉框的需求还是比较常见的,但是element并没有这种组件以供使用.在这里,小编就基于element如何封装一个树状下拉框做个详细的介绍. 通过这篇文章,你可以了解学习到一个树 ...
elementUI树状图竖向滚动条和横向滚动条问题
添加样式: <div class="device-tree"> <el-scrollbar style="height:100%"> & ...
java web树状导航菜单_导航条——树状导航菜单
1.概述对于一个导航文字很多,并且可以对导航内容进行分类的网站来说,可以将页面中的导航文字以树状图的形式显示,树状图的导航菜单在实际开发应用中非常多.应用它可以方便用户查看.运行本实例,如图1所示, ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Spring Boot Vue Element入门实战(完结)
最近给朋友做一个大学运动会管理系统,用作教学案例,正好自己也在自学VUE,决定用spring boot vue做一个简单的系统.vue这个前端框架很火,他和传统的Jquery 编程思路完全不一样,Jq ...
elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
vue用el-select和el-tree实现树状结构单击选中
业务需求是选择框展示后端传来的树状结构数据,可下拉,选中节点显示在输入框下拉菜单消失一.代码 1.template部分 <template><div><el-selec ...
elementui树状菜单tree_Java + Element-UI 实现简单的树形菜单
一.简单入门级树形菜单实现(纯后台逻辑) 1.简介 (1)开发环境 IDEA + JDK1.8 + mysql 1.8 SpringBoot 2.2.6 + mybatis-plus 此处仅后台开发( ...

vue+element实现树状菜单并底层菜单横向排列

vue+element实现树状菜单并底层菜单横向排列相关推荐

最新文章

热门文章