집 > 기사 > 웹 프론트엔드 > vuejs에서 재귀 트리 메뉴 구성요소를 구현하는 방법(자세한 튜토리얼)

vuejs에서 재귀 트리 메뉴 구성요소를 구현하는 방법(자세한 튜토리얼)

亚连원래의: 2018-06-12 10:42:191877검색

이 글에서는 주로 vuejs의 재귀 트리 메뉴 구성 요소 구현을 소개하고 참고용으로 제공합니다.

머리말

얼마 전 vue를 사용하여 재귀 구성 요소를 가장 많이 사용하는 백엔드 관리 시스템을 구축했습니다. 그리고 공식 문서에 익숙하지 않아서 많은 함정을 밟았습니다. 오늘은 모두와 공유하겠습니다.

Recursive Components

구성 요소는 이름 옵션이 있는 경우에만 템플릿 내에서 자신을 재귀적으로 호출할 수 있습니다. 공식 웹사이트의 이 문장은 키 정의 구성 요소에 이름 속성이 있어야 한다는 것입니다.

시뮬레이션 데이터 형식은 다음과 같습니다.

[
  {
   "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를 설정하는 것이며, 제목은 p 요소로 래핑됩니다.

<template>
 <li>
  <span @click="toggle">   <!-- toggle:点击关闭展开 -->
   <i v-if="isFolder" class="icon" :class="[open ? &#39;folder-open&#39; : &#39;folder&#39;]" @cilck="toggle"></i>
   <!-- <i v-if="isFolder" class="icon " :class="[open ? &#39;folder-open&#39; : &#39;folder&#39;]"></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 속성 사용

주의할 점 네, 상위 컴포넌트에서 전달된 데이터를 먼저 deep copy해야 합니다

Deep copy: 데이터에 props를 할당하고 JSON 값을 할당하면서 Deep Copy를 만듭니다. .parse(JSON.stringify(이 값은 괜찮을 것입니다)) data 에서 데이터 값은 자체적으로 이름이 지정됩니다

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

vue의 아이디어에 따라 Dom 트리를 작동하지 않고 두 개의 변수를 정의합니다. 하나는 하위 메뉴를 표시하고 숨기는 데 사용되며(열기), 하나는 아이콘을 수정하기 위해 하위 메뉴를 저장하는 데 사용됩니다(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
    }
   }
  },

이제 트리 메뉴가 완성되었습니다.

위 내용은 제가 모두를 위해 정리한 내용이니, 앞으로도 많은 분들께 도움이 되었으면 좋겠습니다.

vuejs에서 재귀 트리 메뉴 구성요소를 구현하는 방법(자세한 튜토리얼)

관련 기사