vue二级联动下拉列表

Vue二级联动下拉列表是一种常见的前端交互组件，用于实现两个或多个下拉列表之间的关联关系。当第一个下拉列表选择某个选项时，第二个下拉列表会根据选择的值进行动态更新。

实现Vue二级联动下拉列表的一般步骤如下：
1. 在Vue组件中定义两个数据属性，分别表示第一个和第二个下拉列表的选中值。
2. 在模板中使用`<select>`标签和`v-model`指令绑定数据属性，实现下拉列表的渲染和选中值的双向绑定。
3. 监听第一个下拉列表的选中值变化，通过方法或计算属性动态更新第二个下拉列表的选项。
4. 根据第一个下拉列表的选中值，筛选或请求相应的数据，更新第二个下拉列表的选项。
5. 用户选择第二个下拉列表的选项后，将选中值保存到对应的数据属性中。

以下是一个简单的示例代码：

<template>
  <div>
    <select v-model="firstSelected" @change="updateSecondOptions">
      <option value="">请选择</option>
      <option v-for="option in firstOptions" :value="option.value" :key="option.value">{{ option.label }}</option>
    </select>
    <select v-model="secondSelected">
      <option value="">请选择</option>
      <option v-for="option in secondOptions" :value="option.value" :key="option.value">{{ option.label }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstSelected: '',
      secondSelected: '',
      firstOptions: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        // 其他选项...
      ],
      secondOptions: []
    };
  },
  methods: {
    updateSecondOptions() {
      // 根据第一个下拉列表的选中值更新第二个下拉列表的选项
      if (this.firstSelected === 'option1') {
        this.secondOptions = [
          { label: '选项A', value: 'optionA' },
          { label: '选项B', value: 'optionB' },
          // 其他选项...
        ];
      } else if (this.firstSelected === 'option2') {
        this.secondOptions = [
          { label: '选项X', value: 'optionX' },
          { label: '选项Y', value: 'optionY' },
          // 其他选项...
        ];
      } else {
        this.secondOptions = [];
      }
      this.secondSelected = ''; // 清空第二个下拉列表的选中值
    }
  }
};
</script>