华山资源网

vuejs实现递归树型菜单组件
网络编程 2024/11/15 佚名
3 1

前言

前段时间使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，今天写出来和大家一起分享。

递归组件

组件在它的模板内可以递归地调用自己，只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。

模拟数据格式如下：

[
  {
   "id": "1",
   "menuName": "基础管理",
   "menuCode": "10",
   "children": [
    {
     "menuName": "用户管理",
     "menuCode": "11"
    },
    {
     "menuName": "角色管理",
     "menuCode": "12",
     "children": [
      {
       "menuName": "管理员",
       "menuCode": "121"
      },
      {
       "menuName": "CEO",
       "menuCode": "122"
      },
      {
       "menuName": "CFO",
       "menuCode": "123"
      },
      {
       "menuName": "COO",
       "menuCode": "124"
      },
      {
       "menuName": "普通人",
       "menuCode": "124"
      }
     ]
    },
    {
     "menuName": "权限管理",
     "menuCode": "13"
    }
   ]
  },
  {
   "id": "2",
   "menuName": "商品管理",
   "menuCode": ""
  },
  {
   "id": "3",
   "menuName": "订单管理",
   "menuCode": "30",
   "children": [
    {
     "menuName": "订单列表",
     "menuCode": "31"
    },
    {
     "menuName": "退货列表",
     "menuCode": "32",
     "children": []
    }
   ]
  },
  {
   "id": "4",
   "menuName": "商家管理",
   "menuCode": "",
   "children": []
  }
 ]

html我们思路按照ul里面套li，无限ul套li，标题用div元素包裹，

<template>
 <li>
  <span @click="toggle">   <!-- toggle:点击关闭展开 -->
   <i v-if="isFolder" class="icon" :class="[open " @cilck="toggle"></i>
   <!-- <i v-if="isFolder" class="icon " :class="[open "></i> -->
   <i v-if="!isFolder" class="icon folder-text"></i>
   {{model.menuName}}
  </span>
  <ul v-show="open" v-if="isFolder">
   <treeMenu v-for="item in model.children" :model="item"></treeMenu>
  </ul>
 </li>
</template>

官方文档里面写的递归组件强调了使用name属性

需要注意的是，由父组件传递过来的数据要先进行深拷贝哦

深拷贝：把props赋值到data里，赋值的同时深拷贝一下，data里 JSON.parse(JSON.stringify(这个值就行了))，data值自己命名

export default {
  name: 'treeMenu',
  //props: ['model'], //这样和下面效果一样
  props: {
   model: { type: Object },
  },
  components: {},
}

按照vue的思想，不操作Dom树，我们定义两个变量，一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。

  data() {
   return {
    open: false, //一个显示隐藏子菜单(open)
    //isFolder: true  //这个不要写死，运用计算属性计算看存不存在
   }
  },

利用vue计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度

  computed: {
   isFolder() { //利用vue计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度
    // return this.model.children && this.model.children.length //和下面效果一样
    let isFolder = false
    if (this.model.children && this.model.children.length) {
     isFolder = true;
    } else {
     isFolder = false;
    }
    return isFolder
   }
  },

显示隐藏事件

  methods: {
   toggle() {
    if (this.isFolder) {
     this.open = !this.open
    }
   }
  },

写到这里我们已经做完一个树形菜单了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com