vue树形菜单

phoenixsky 发布于2019-08-01 18:41 / 1616人阅读

摘要：树形菜单由于项目原因，没有使用框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。

vue树形菜单

由于项目原因，没有使用ui框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。
html代码

js代码直接调用api 把请求到的数据直接赋值给permissions就可以了，这里不多说。直接说最重要的部分，点击checkbox 把id传给后台并实现全选，反选。

全选，反选

curry(e,node){
  if (e.target.checked) {
    node.subDetail.forEach((sub, i)=>{
      node.subDetail[i].checked =true;
    })
  }else{
    node.subDetail.forEach((sub, i)=>{
      node.subDetail[i].checked =false;
    })
  }
},

通过v-model的数据双向绑定这一属性，对对后台返回的checked这一字段做判断，当点击一级菜单checked为true时，把二级菜单的checked也赋值为true 就可以实现全选反选。

点击菜单添加id给后台

watch:{
  permissions: {
        deep: true,
        immediate: true,
        handler(val) {
            this.form.cPermissionIds = [];
            this.form.cDetailIds = [];
            val.forEach(menu => {
                if (menu.checked) {
                    this.form.cPermissionIds.push(menu.cPermissionId);
                };
                menu.subDetail.forEach(sub => {
                    if (sub.checked) {
                        this.form.cDetailIds.push(sub.cDetailId);                   
                    };
                });
            });
        },
    },
},

通过监听permissions的数据变化当checkbox被选中，checked为true时把checkbox所对应的id 推进数组里面存起来，注意的是，一定要在前面把数组清空，这样可以防止，多次重复点击所造成的数据重复。
以上所说纯属个人观点，欢迎大家提出宝贵的建议，如有雷同，请不要怼我。

GPU云服务器云服务器树形菜单二级树形菜单 web树形菜单 Bootstrap树形菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51975.html

vue树形菜单

摘要：树形菜单由于项目原因，没有使用框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。 vue树形菜单由于项目原因，没有使用ui框架上的树形菜单，所以自己动手并参考大佬的代码写了一个树形菜单的组件，话不多说，直接上代码。html代码showImg(https://segmentfault.com/img/bV5Bq4?w=1015&h=269);j...

BlackHole1 2019-08-22 15:21 评论0 收藏0
VUE+element三级联动或树形菜单获取最后一项,并加入到表格中

摘要：如下图要实现的功能如下勾选三级联动的材料勾选最后一级的材料把勾选的材料信息动态添加到下面表格中数据三级联动数据材料键值对选中的材料从后台获取三级联动数据调用封装的函数把最后一项添加到函数中获取最后一级材料函数遍历材料树如果有下级材料就一直如下图,要实现的功能如下,勾选三级联动的材料,勾选最后一级的材料,把勾选的材料信息动态添加到下面表格中showImg(https://segment...

yeyan1996 2019-08-26 10:28 评论0 收藏0
Vue.js-Vue实例

摘要：推荐阅读原文学习笔记实例实例组件间通信组件间通信组件间通信用户信息表图书电商数据图书电商数据图书电商数据渲染微信精选数据渲染微信精选数据渲染微信推荐阅读原文学习笔记：Vue实例 Vue实例组件间通信 See the Pen 组件间通信 by whjin (@whjin) on CodePen. 图书电商数据 See the Pen 图书电商数据 by whjin (@whji...

shinezejian 2019-08-23 16:03 评论0 收藏0
java实现构造无限层级树形菜单

摘要：继续填上篇文章的坑，这里来讲一下后台如何构造多叉树，这样前台就可接收到数据递归构造树形菜单了。继续填上篇文章的坑，这里来讲一下后台java如何构造多叉树，这样前台就可接收到数据递归构造树形菜单了。我们来理一下如何实现构造多叉树的逻辑吧，其实整个问题概括起来就是1、构造一个实体类，用来存储节点，所以我们构造的需要四个对象（id，pid，name，和chirenList）2、构造菜单结...

seasonley 2019-08-15 11:59 评论0 收藏0
localStorage实现本地储存树形菜单

摘要：因为任务需要添加到树的结构上，所以要记录任务是添加到哪个结点上的，需要为每个树结点添加一个作为标识以便于在结点上添加任务，树状结构中每个结点的按照树的先序遍历将结点的依次储存于数组中。 localStorage实现本地储存树形菜单最近在写一个Todo-list的页面，页面布局和操作都写完后，想要用localStorage实现本地储存。然而对储存数据的方法一无所知，就先去了解了web的...

William_Sang 2019-08-21 10:56 评论0 收藏0