2023Vue 中如何实现多级联动菜单？

Vue.js 是一个流行的前端框架，许多网站都使用 Vue.js 来开发交互式 UI。其中一个常见的 UI 组件是多级联动菜单（也称为级联选择器），它允许用户通过选择一个选项来过滤另一个选项的列表，从而实现更精细的搜索或导航功能。在这篇文章中，我们将介绍如何使用 Vue.js 实现一个多级联动菜单。

1. 准备工作

在开始之前，我们需要确保我们已经安装了Vue.js。可以使用 npm 或 Vue.js 的官方 CDN 进行安装。假设我们已经有了一个 Vue.js 应用，现在需要添加一个多级联动菜单组件。

2. 创建多级联动菜单组件

我们将创建一个单文件组件 CascadingMenu.vue 来实现一个简单的多级联动菜单。在组件的模板中，我们将使用 Vue.js 的 v-for 指令来渲染每个选项的列表，并使用 v-model 来绑定选项的值和用户选择的值。当用户选择一个选项时，我们需要更新子菜单的选项列表并显示它。

<template>
  <div class="cascading-menu">
    <select v-model="selectedOption">
      <option value="">请选择</option>
      <option v-for="option in options" :value="option">{{ option.label }}</option>
    </select>
    <cascading-menu v-if="hasChildren" :options="selectedOption.children" />
  </div>
</template>

<script>
export default {
  name: 'CascadingMenu',
  props: {
    options: {
      type: Array,
      default: () => [],
      required: true
    },
    selectedValue: {
      default: null,
      required: false
    }
  },
  data() {
    return {
      selectedOption: this.selectedValue,
      hasChildren: false
    };
  },
  watch: {
    selectedOption() {
      this.hasChildren = this.selectedOption.children.length > 0;
    }
  }
};
</script>

现在我们已经创建了一个简单的多级联动菜单组件，它能够显示每个选项，并将用户选择的值绑定到 selectedOption 中。

3. 添加数据

在实现多级联动菜单之前，我们需要准备一些数据来模拟用户可以选择的选项。我们可以使用一个简单的对象数组来表示每个选项和它们的子菜单，如下所示。

data() {
    return {
      options: [
        {
          label: '选项1',
          children: [
            {
              label: '选项1-1',
              children: [
                { label: '选项1-1-1', children: [] },
                { label: '选项1-1-2', children: [] },
                { label: '选项1-1-3', children: [] }
              ]
            },
            {
              label: '选项1-2',
              children: [{ label: '选项1-2-1', children: [] }]
            }
          ]
        },
        {
          label: '选项2',
          children: [
            {
              label: '选项2-1',
              children: [
                { label: '选项2-1-1', children: [] },
                { label: '选项2-1-2', children: [] },
                { label: '选项2-1-3', children: [] }
              ]
            },
            {
              label: '选项2-2',
              children: [{ label: '选项2-2-1', children: [] }]
            }
          ]
        }
      ]
    };
  }

其中，每个选项都有一个 label 属性和一个 children 属性，children 属性表示子菜单（如果存在）的选项。

4. 实现多级联动菜单

我们已经创建了一个多级联动菜单组件并准备了数据，现在我们需要将它们结合起来，并使用递归组件来实现多级联动菜单。我们可以在 App.vue 文件中包含 cascading-menu 组件，并将 options 数据作为 props 传递给它。在 cascading-menu 组件内部，我们将通过递归调用自身来显示所有子菜单，从而实现多级联动菜单。

<template>
  <div class="app">
    <cascading-menu :options="options" />
  </div>
</template>

<script>
import CascadingMenu from './components/CascadingMenu';

export default {
  name: 'App',
  components: {
    CascadingMenu
  },
  data() {
    return {
      options: [
        {
          label: '选项1',
          children: [
            {
              label: '选项1-1',
              children: [
                { label: '选项1-1-1', children: [] },
                { label: '选项1-1-2', children: [] },
                { label: '选项1-1-3', children: [] }
              ]
            },
            {
              label: '选项1-2',
              children: [{ label: '选项1-2-1', children: [] }]
            }
          ]
        },
        {
          label: '选项2',
          children: [
            {
              label: '选项2-1',
              children: [
                { label: '选项2-1-1', children: [] },
                { label: '选项2-1-2', children: [] },
                { label: '选项2-1-3', children: [] }
              ]
            },
            {
              label: '选项2-2',
              children: [{ label: '选项2-2-1', children: [] }]
            }
          ]
        }
      ]
    };
  }
};
</script>

现在我们已经实现了一个简单的多级联动菜单，用户可以通过点击其中一个选项来显示它的子菜单。对于每个子菜单，我们可以通过递归调用 cascading-menu 组件来显示所有子菜单的选项。

5. 总结

在这篇文章中，我们学习了如何使用 Vue.js 实现一个多级联动菜单。我们创建了一个简单的 cascading-menu 组件，并使用递归调用自身来实现多级联动菜单。通过准备和使用数据，我们展示了如何渲染每个选项，并如何利用 v-model 来绑定选项的值和用户选择的值。我们希望这篇文章能够帮助你更好地理解 Vue.js 的使用，并创建更强大的 UI 组件。