vue 批量新增菜单

在Vue.js中批量新增菜单通常涉及到数据绑定和组件循环渲染。如果你有一个数组，其中包含多个菜单项的数据，你可以创建一个动态生成的菜单列表，按照数组结构进行渲染。以下是一个简单的步骤：

1. 定义一个菜单数据模型：

data() {
  return {
    menus: [
      { name: '菜单A', children: [] },
      { name: '菜单B', children: [] } // ... 更多菜单项
    ]
  }
}

2. 创建一个自定义的菜单组件，比如`MenuItem.vue`，用于展示单个菜单项：

<template>
  <li v-for="(menu, index) in menus" :key="index">
    <span>{{ menu.name }}</span>
    <!-- 如果有子菜单，可以递归地遍历children -->
    <ul v-if="menu.children.length > 0">
      <MenuItem v-for="child in menu.children" :key="child.id"></MenuItem>
    </ul>
  </li>
</template>

3. 在父组件中使用`v-for`遍历并添加新的菜单项到`menus`数组：

methods: {
  addMenu(name, parentId) {
    this.menus.push({ name, children: [] });
    // 如果你想给新添加的菜单指定父ID，可以在push后设置它
    const lastMenu = this.menus[this.menus.length - 1];
    if (parentId && parentId >= 0 && parentId < this.menus.length) {
      lastMenu.parentId = parentId;
    }
  }
}

4. 调用`addMenu`方法来添加新菜单：

<button @click="addMenu('新菜单', existingParentId)">添加子菜单</button>

在这个例子中，你需要确保你有正确的引用和父子关系管理，因为Vue的双向数据绑定会自动更新视图。