前端vue实现二级菜单下禁止添加一级目录

在Vue.js中实现二级菜单下禁止添加一级目录，通常是在数据结构设计和模板渲染中做处理。假设你的数据模型类似于这样的树形结构：

data() {
  return {
    menuItems: [
      { name: '一级目录1', children: [] },
      { name: '一级目录2', children: [] },
      { name: '二级目录1', children: [{ name: '三级菜单1' }, { name: '三级菜单2' }] }
    ]
  };
}

在模板中，你可以通过v-if条件判断来限制某个节点是否允许添加一级目录。例如，对于`children`属性为空的节点，我们可以在点击事件中检查其状态：

<template>
  <ul>
    <li v-for="(item, index) in menuItems" :key="index">
      {{ item.name }}
      <ul v-if="!item.children.length">
        <!-- 这里可以添加一个按钮或元素，表示添加一级目录 -->
        <button @click.prevent="addItem(item)">添加一级目录</button>
      </ul>
      <ul v-for="child in item.children" :key="child.name">
        <li>{{ child.name }}</li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    addItem(item) {
      if (!item.children.length) {
        // 在这里阻止添加操作，并显示提示信息
        console.log('当前不允许在此处添加一级目录');
      } else {
        // 如果已经有子级，说明可以继续添加
        // 实际操作可以根据需求来，比如将新一级目录添加到item.children数组中
      }
    }
  }
};
</script>