如何利用Element ui 中的change事件监听一个下拉框 (下拉框中有四个选项分别为 1-同城寄 2-省内寄 3-经济区互寄 4-跨省)当选中3-经济区互寄的时候 让另一个区域显示一个多选框(多项框里面有四个选项 分别为 京津冀 江浙沪 川渝 黑吉辽) 如果不选中3-经济区互寄或者选中其他选项则显示为全国
时间: 2024-04-16 14:26:50 浏览: 22
你可以使用 Element UI 中的下拉框组件和多选框组件来实现这个需求。首先,需要在 Vue 组件中导入对应的组件库。
在模板中,使用 `<el-select>` 标签来创建下拉框,并绑定 change 事件监听用户的选择。根据用户选择的值,可以控制另一个区域的显示与隐藏。
在 `<el-select>` 标签中,使用 `<el-option>` 标签来定义选项,并设置对应的值和标签。
当用户选择了 3-经济区互寄时,可以根据 `v-model` 绑定的值来判断是否显示多选框。可以通过 `v-show` 来控制多选框的显示与隐藏。
以下是一个示例代码:
```HTML
<template>
<div>
<el-select v-model="selectedOption" @change="onChange">
<el-option label="同城寄" value="1"></el-option>
<el-option label="省内寄" value="2"></el-option>
<el-option label="经济区互寄" value="3"></el-option>
<el-option label="跨省" value="4"></el-option>
</el-select>
<div v-show="selectedOption === '3'">
<span>请选择区域:</span>
<el-checkbox-group v-model="selectedRegions">
<el-checkbox label="京津冀"></el-checkbox>
<el-checkbox label="江浙沪"></el-checkbox>
<el-checkbox label="川渝"></el-checkbox>
<el-checkbox label="黑吉辽"></el-checkbox>
</el-checkbox-group>
</div>
<div v-show="selectedOption !== '3'">
全国
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
selectedRegions: [],
};
},
methods: {
onChange() {
// 处理 change 事件的逻辑
},
},
};
</script>
```
在上面的示例中,`selectedOption` 绑定了下拉框的值,`selectedRegions` 绑定了多选框的值。当用户选择了 3-经济区互寄时,会显示多选框,用户可以选择区域。如果用户选择其他选项或者不选择 3-经济区互寄,则显示 "全国"。你可以在 `onChange` 方法中处理 change 事件的逻辑。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)