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

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

// 内容区渲染后执行 判断底层 赋 class
    renderContent(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.赋值：
说起来真是一把辛酸泪，当时看前人博客时候还没想那么多，都是最后自己反复看文档摸索出来的。
众所周知，申明变量并赋初始值是这样的：

data() {
    return {
     a : 0
    }
}

在methods里赋值是这样的：

this.a = this.b

然而！！！在element的树形控件赋值是这样的：

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

或者是这样的：

<el-tree
  :data="data2"
  show-checkbox
  node-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实现树状菜单并底层菜单横向排列

猜你喜欢