vue3下拉框二级联动

Vue3中的下拉框二级联动通常涉及到数据绑定和事件监听。当你在一个下拉框选择了第一个选项后，会触发一个方法，这个方法会更新数据，然后根据新的数据动态地填充第二个下拉框的选项。这通常通过以下几个步骤实现：

1. **创建组件**: 创建两个`<select>`元素，分别用于一级和二级选择。给每个下拉框设置一个`v-model`属性来双向绑定数据。

<select v-model="firstLevelOption" @change="loadSecondLevelOptions">
  <option value="">请选择</option>
  <!-- 一级选项 -->
</select>

<select v-model="secondLevelOption">
  <option value="">请选择</option>
  <!-- 二级选项，初始为空 -->
</select>

2. **处理数据变化**: 当`firstLevelOption`发生变化时，调用`loadSecondLevelOptions`方法，从服务器或本地存储获取相应的二级选项，并更新`secondLevelOption`的数据。

export default {
  data() {
    return {
      firstLevelOption: '',
      secondLevelOption: [],
    };
  },
  methods: {
    loadSecondLevelOptions() {
      // 根据firstLevelOption值请求API获取二级选项
      this.$axios.get('/api/second-level', { params: { id: this.firstLevelOption } })
        .then(response => (this.secondLevelOption = response.data))
        .catch(error => console.error('Error fetching second level options:', error));
    },
  },
};

3. **初始化数据**: 在组件的生命周期钩子里（如`mounted()`），你可以预先加载一些默认的二级选项，或者在数据初始化时就根据一级选项提供对应的选项。

mounted() {
  this.loadSecondLevelOptions();
}