vue层级下拉菜单 第二层显示的数据由第一层选择的决定

你可以通过监听第一层选择的数据变化来动态计算第二层应该显示的数据。具体实现可以在第一层触发选择事件后，在方法中过滤出符合条件的第二层数据并赋值给对应的变量，然后在第二层的模板中使用这个变量来渲染显示数据。以下是一个示例代码：

<template>
  <div>
    <select v-model="selectedValue1" @change="onSelect1">
      <option v-for="(option, index) in options1" :key="index" :value="option.value">{{ option.label }}</option>
    </select>
    <select v-model="selectedValue2">
      <option v-for="(option, index) in options2" :key="index" :value="option.value">{{ option.label }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue1: '',
      selectedValue2: '',
      options1: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ],
      options2: []
    }
  },
  methods: {
    onSelect1() {
      // 根据第一层选择的值过滤出第二层应该显示的数据
      if (this.selectedValue1 === '1') {
        this.options2 = [
          { label: '选项1-1', value: '1-1' },
          { label: '选项1-2', value: '1-2' }
        ]
      } else if (this.selectedValue1 === '2') {
        this.options2 = [
          { label: '选项2-1', value: '2-1' },
          { label: '选项2-2', value: '2-2' }
        ]
      } else if (this.selectedValue1 === '3') {
        this.options2 = [
          { label: '选项3-1', value: '3-1' },
          { label: '选项3-2', value: '3-2' }
        ]
      } else {
        this.options2 = []
      }
      // 重置第二层选择的值
      this.selectedValue2 = ''
    }
  }
}
</script>

在这个示例中，我们通过监听第一层选择框的 `change` 事件来触发选择事件处理方法 `onSelect1`，在这个方法中根据第一层选择的值来动态计算第二层应该显示的数据，并赋值给 `options2` 变量。然后在第二层的选择框中使用 `v-for` 指令来遍历 `options2` 数组，并渲染对应的选项。同时我们也需要保证在每次第一层选择变化时，重置第二层选择的值，以避免出现数据错误的情况。