element-ui select 二级联动 在使用select 选择框时,2个select 怎么关联在一起(第一个值发生变化,第二个select值随第一个变化而不同)...
时间: 2024-03-09 20:50:09 浏览: 7
可以使用 Element UI 提供的 Cascader 级联选择器组件来实现二级联动。在 Cascader 中,可以通过设置 options 属性来设置选项列表,通过设置 props 属性来指定选项列表中 label 和 value 属性的名称,通过设置 change 事件来监听选择器的值变化。
下面是一个使用 Cascader 实现二级联动的示例代码:
```html
<template>
<div>
<el-cascader
v-model="selectedValues"
:options="options"
:props="props"
@change="handleChange"
placeholder="请选择"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
selectedValues: [],
options: [
{
value: 'beijing',
label: '北京',
children: [
{
value: 'dongcheng',
label: '东城',
},
{
value: 'xicheng',
label: '西城',
},
],
},
{
value: 'shanghai',
label: '上海',
children: [
{
value: 'pudong',
label: '浦东',
},
{
value: 'minhang',
label: '闵行',
},
],
},
],
props: {
value: 'value',
label: 'label',
},
}
},
methods: {
handleChange() {
// 处理选择器值的变化
},
},
}
</script>
```
在上面的示例代码中,options 数组中包含了两个省份的选项,每个省份下面包含了两个城区的选项。props 对象中的 value 属性指定了选项的值属性名称,label 属性指定了选项的显示文本属性名称。
当用户选择了第一个选项时,Cascader 组件会触发 change 事件,我们可以在 handleChange 方法中处理选项值的变化,从而实现二级联动的效果。例如,可以根据第一个选项的值来动态更新第二个选项的选项列表。