element 下拉框联动_element-ui select 二级联动
时间: 2023-06-28 11:08:09 浏览: 61
在 Element UI 中,可以通过 `el-select` 和 `el-option` 组件来实现下拉框联动,具体实现方式如下:
1. 在 HTML 中定义两个 `el-select` 组件,分别对应一级和二级下拉框,同时为它们绑定 `v-model` 指令,以便获取选中的值。
2. 在一级下拉框中,为每个选项绑定一个 `change` 事件,当选项被选中时触发该事件。
3. 在 `change` 事件处理函数中,根据当前选中的值,动态生成二级下拉框的选项,并将其赋值给二级下拉框的 `options` 属性。
代码示例:
```html
<template>
<div>
<el-select v-model="selectedFirst" @change="handleChangeFirst" placeholder="请选择一级选项">
<el-option v-for="item in firstOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="selectedSecond" placeholder="请选择二级选项">
<el-option v-for="item in secondOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedFirst: '',
selectedSecond: '',
firstOptions: [
{label: '选项1', value: '1'},
{label: '选项2', value: '2'},
{label: '选项3', value: '3'}
],
secondOptions: []
}
},
methods: {
handleChangeFirst() {
// 根据一级选项动态生成二级选项
switch (this.selectedFirst) {
case '1':
this.secondOptions = [
{label: '选项1-1', value: '1-1'},
{label: '选项1-2', value: '1-2'},
{label: '选项1-3', value: '1-3'}
]
break
case '2':
this.secondOptions = [
{label: '选项2-1', value: '2-1'},
{label: '选项2-2', value: '2-2'},
{label: '选项2-3', value: '2-3'}
]
break
case '3':
this.secondOptions = [
{label: '选项3-1', value: '3-1'},
{label: '选项3-2', value: '3-2'},
{label: '选项3-3', value: '3-3'}
]
break
default:
this.secondOptions = []
}
// 清空二级选项的值
this.selectedSecond = ''
}
}
}
</script>
```