vue 下拉框二级联动
时间: 2023-09-14 15:02:32 浏览: 118
在 vue 中实现下拉框二级联动,可以采用以下步骤:
1. 定义两个数组,一个存储一级选项的数据,一个存储二级选项的数据。
2. 在模板中使用 v-for 遍历一级选项数组,生成一级选项的下拉框。同时,绑定一个 change 事件,当一级选项改变时触发事件。
3. 在 change 事件中,获取当前选中的一级选项的值,根据这个值从二级选项数组中筛选出对应的数据,生成二级选项的下拉框。
4. 在二级选项的下拉框中同样绑定一个 change 事件,当二级选项改变时触发事件。可以在此事件中获取一级选项和二级选项的值,进行其他操作。
以下是一个示例代码:
```html
<template>
<div>
<select v-model="selectedOption1" @change="handleChangeOption1">
<option value="">请选择一级选项</option>
<option v-for="option in options1" :value="option">{{ option }}</option>
</select>
<select v-model="selectedOption2" @change="handleChangeOption2">
<option value="">请选择二级选项</option>
<option v-for="option in options2" :value="option">{{ option }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
options1: ['选项1', '选项2', '选项3'],
options2: {
'选项1': ['选项1-1', '选项1-2', '选项1-3'],
'选项2': ['选项2-1', '选项2-2', '选项2-3'],
'选项3': ['选项3-1', '选项3-2', '选项3-3'],
},
selectedOption1: '',
selectedOption2: '',
};
},
methods: {
handleChangeOption1() {
this.selectedOption2 = '';
if (this.selectedOption1) {
this.options2 = this.options2[this.selectedOption1];
} else {
this.options2 = {};
}
},
handleChangeOption2() {
console.log('一级选项:', this.selectedOption1);
console.log('二级选项:', this.selectedOption2);
},
},
};
</script>
```
在这个示例代码中,options1 存储的是一级选项的数据,options2 存储的是二级选项的数据,使用对象来存储每个一级选项对应的二级选项数据。
在 handleChangeOption1 方法中,根据当前选中的一级选项的值,筛选出对应的二级选项数据并赋值给 options2。如果当前选中的一级选项的值为空,则清空 options2。
在 handleChangeOption2 方法中,获取当前选中的一级选项和二级选项的值,可以进行其他操作。
在模板中,使用 v-model 绑定选中的值,使用 v-for 遍历选项数组生成下拉框。同时,使用 @change 绑定 change 事件。