In Element-UI, you can monitor the option change event of the first selection box , and then control the display and hiding of the second selection box according to the selected option . Here is a simple sample code showing how to do this:
```vue
<template>
<div>
<el-select v-model="selectedOption" @change="handleSelectChange">
<el-option label="选项1" value="option1"></el-option>
<el-option label="选项2" value="option2"></el-option>
</el-select>
<el-select v-if="showSecondSelect" v-model="selectedSecondOption">
<el-option label="第二个选择框选项1" value="secondOption1"></el-option>
<el-option label="第二个选择框选项2" value="secondOption2"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
// 第一个选择框双向绑定值
selectedOption: '',
// 第二个选择框双向绑定值
selectedSecondOption: '',
// 默认不显示第二个选择框
showSecondSelect: false
};
},
methods: {
handleSelectChange(selectedOption) {
if (selectedOption === 'option1') {
this.showSecondSelect = true;
} else {
this.showSecondSelect = false;
this.selectedSecondOption = ''; // Reset the second select value
}
}
}
};
</script>
```
In this example, first there are two selection boxes, one is the first selection box, and the other is the second selection box that is displayed or hidden according to the options of the first selection box.
By listening to the `change` event of the first select box , we can determine the selected option in the ` handleSelectChange ` method . If the first option is selected, we set `showSecondSelect` to `true` to show the second select box. If the first option is not selected, we set `showSecondSelect` to `false` and reset the selected value of the second select box to empty .
In this way, by monitoring the option change of the first selection box, you can dynamically control the display and hiding of the second selection box.