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

最新推荐文章于 2022-08-11 15:19:12 发布

皮皮虾-coding

最新推荐文章于 2022-08-11 15:19:12 发布

阅读量1.8w

点赞数 6

分类专栏： vue 文章标签：树状菜单

本文链接：https://blog.youkuaiyun.com/qq_41612675/article/details/86612840

版权

参考博文：https://blog.youkuaiyun.com/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"