elementui下拉框二级联动
时间: 2023-09-06 15:12:11 浏览: 70
在Element UI中实现下拉框的二级联动,可以使用`el-cascader`组件来实现。`el-cascader`是一个级联选择器,可以支持多级联动选择。
首先,你需要准备好数据源,包括一级选项和对应的二级选项。然后在Vue组件中使用`el-cascader`组件来显示下拉框。
以下是一个简单的示例代码:
```vue
<template>
<div>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="{
value: 'value',
label: 'label',
children: 'children'
}"
@change="handleCascaderChange"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [], // 保存选择的选项值
options: [
{
value: 'option1',
label: '选项1',
children: [
{
value: 'option1-1',
label: '选项1-1'
},
{
value: 'option1-2',
label: '选项1-2'
}
]
},
{
value: 'option2',
label: '选项2',
children: [
{
value: 'option2-1',
label: '选项2-1'
},
{
value: 'option2-2',
label: '选项2-2'
}
]
}
]
};
},
methods: {
handleCascaderChange(value) {
console.log('选择的值:', value);
}
}
};
</script>
```
在上面的示例中,`options`数组保存了一级选项和对应的二级选项。`el-cascader`组件通过`v-model`绑定`selectedOptions`来获取选择的值,通过`options`属性传入选项数据,并使用`props`属性来指定值、标签和子选项的字段名。
当选择发生变化时,可以通过`@change`事件来获取选中的值,然后执行相关的逻辑。
这样就实现了Element UI下拉框的二级联动。你可以根据自己的需求修改选项数据和相应的处理逻辑。