vue单个组件实现无限层级多选菜单功能

下面我将详细讲解“vue单个组件实现无限层级多选菜单功能”的完整攻略。

目录

• 前置知识
• 实现步骤
• 创建Menu.vue组件
• 编写Menu.vue组件模板
• 编写Menu.vue组件脚本
• 在App.vue中使用Menu.vue组件
• 示例说明
• 示例1：只有两级菜单
• 示例2：有三级菜单

前置知识

• 熟练掌握Vue.js框架的使用
• 对Vue组件的概念有基本了解

实现步骤

下面分步骤进行实现。

创建Menu.vue组件

在Vue项目的src/components目录下，创建Menu.vue组件。

编写Menu.vue组件模板

在Menu.vue组件中，编写模板代码。模板中包含以下几部分内容：

• 多层级菜单的展示
• 复选框的选中和取消选中
• 点击菜单项时的展开/收缩

代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in data" :key="item.id">
        <input type="checkbox" :id="item.id" v-model="item.checked" @change="handleChange" />
        <label :for="item.id">{{ item.label }}</label>
        <menu-item v-if="item.children" :data="item.children" :level="level + 1"></menu-item>
      </li>
    </ul>
  </div>
</template>

该模板中使用了自定义组件menu-item，对应的组件名称为MenuItem。

编写Menu.vue组件脚本

在Menu.vue组件中，编写脚本代码。代码中主要包含以下几个部分：

• 点击菜单项时的展开/收缩
• 复选框的选中和取消选中
• 数据的获取和更新

代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in data" :key="item.id" :class="{ active: item.expanded }">
        <input type="checkbox" :id="item.id" v-model="item.checked" @change="handleChange" />
        <label :for="item.id">{{ item.label }}</label>
        <menu-item v-if="item.children" :data="item.children" :level="level + 1"></menu-item>
      </li>
    </ul>
  </div>
</template>

<script>
import MenuItem from './MenuItem.vue'

export default {
  name: 'Menu',
  components: {
    MenuItem
  },
  props: {
    data: Array,
    level: {
      type: Number,
      default: 1
    }
  },
  methods: {
    handleChange() {
      this.$emit('change', this.data)
    }
  }
}
</script>

在App.vue中使用Menu.vue组件

在App.vue文件中，引入Menu组件，将菜单数据传入组件的data属性中，如下所示：

<template>
  <div id="app">
    <Menu :data="menuData" @change="handelMenuChange"></Menu>
  </div>
</template>

<script>
import Menu from './components/Menu.vue'

export default {
  components: {
    Menu
  },
  data() {
    return {
      menuData: [{
        id: 1,
        label: "菜单1",
        checked: false,
        children: [{
          id: 2,
          label: "菜单1-1",
          checked: false
        }]
      }]
    }
  },
  methods: {
    handelMenuChange(data) {
      console.log(data)
    }
  }
}
</script>

至此，一个无限层级多选菜单组件就完成了。

示例说明

下面通过两个示例对组件功能进行说明。

示例1：只有两级菜单

此示例的菜单数据如下所示：

menuData: [{
  id: 1,
  label: "菜单1",
  checked: false,
  children: [{
    id: 2,
    label: "菜单1-1",
    checked: false
  }, {
    id: 3,
    label: "菜单1-2",
    checked: false
  }]
}, {
  id: 4,
  label: "菜单2",
  checked: false,
  children: [{
    id: 5,
    label: "菜单2-1",
    checked: false
  }]
}]

该数据只包含两级菜单，即一级菜单和二级菜单。每个菜单项包含菜单ID、标签、选中状态和子菜单。此示例中展示的菜单如下所示：

- 菜单1
  - 菜单1-1
  - 菜单1-2
- 菜单2
  - 菜单2-1

在多选框中勾选/取消勾选菜单项，通过Menu组件中的handleChange方法将数据传回App组件中进行处理。

示例2：有三级菜单

此示例的菜单数据如下所示：

menuData: [{
  id: 1,
  label: "菜单1",
  checked: false,
  children: [{
    id: 2,
    label: "菜单1-1",
    checked: false,
    children: [{
      id: 3,
      label: "菜单1-1-1",
      checked: false
    }]
  }]
}, {
  id: 4,
  label: "菜单2",
  checked: false,
  children: [{
    id: 5,
    label: "菜单2-1",
    checked: false
  }]
}]

该数据包含三级菜单，即一级菜单、二级菜单和三级菜单。此示例中展示的菜单如下所示：

- 菜单1
  - 菜单1-1
    - 菜单1-1-1
- 菜单2
  - 菜单2-1

同样，在多选框中勾选/取消勾选菜单项，通过Menu组件中的handleChange方法将数据传回App组件中进行处理。

以上就是Vue单个组件实现无限层级多选菜单功能的完整攻略，如果有不清楚的地方，欢迎继续提问哦~