在 Element-UI 中，您可以通过监听第一个选择框的选项变化事件，然后根据选中的选项来控制第二个选择框的显示与隐藏。以下是一个简单的示例代码，展示如何实现这个功能：
```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>
```
在这个示例中，首先有两个选择框，一个是第一个选择框，另一个是根据第一个选择框的选项控制显示与隐藏的第二个选择框。
通过监听第一个选择框的 `change` 事件，我们可以在 `handleSelectChange` 方法中判断选中的选项。如果选中的是第一个选项，我们将 `showSecondSelect` 设置为 `true`，从而显示第二个选择框。如果选中的不是第一个选项，我们将 `showSecondSelect` 设置为 `false`，同时将第二个选择框的选中值重置为空。
这样，通过监听第一个选择框的选项变化，您就可以动态地控制第二个选择框的显示与隐藏了。