elementUI如何根据不同的el-collapse-item的name的不同,打开不同的Dialog
时间: 2024-02-12 08:08:20 浏览: 24
可以使用 `@change` 事件监听 `el-collapse` 的展开和收起,根据展开的 `name` 属性的不同,来控制对应 `Dialog` 的显示和隐藏。具体实现步骤如下:
1. 在 `el-collapse` 上绑定 `@change` 事件,监听展开和收起。
2. 在事件处理函数中,获取展开的 `name` 属性值,根据不同的值来控制对应的 `Dialog` 显示和隐藏。
示例代码如下:
```html
<template>
<el-collapse @change="handleCollapseChange">
<el-collapse-item title="选项一" name="option1">
<el-button @click="showDialog1">打开 Dialog 1</el-button>
</el-collapse-item>
<el-collapse-item title="选项二" name="option2">
<el-button @click="showDialog2">打开 Dialog 2</el-button>
</el-collapse-item>
</el-collapse>
<el-dialog :visible.sync="dialog1Visible">Dialog 1</el-dialog>
<el-dialog :visible.sync="dialog2Visible">Dialog 2</el-dialog>
</template>
<script>
export default {
data() {
return {
dialog1Visible: false,
dialog2Visible: false
};
},
methods: {
handleCollapseChange(activeNames) {
if (activeNames.includes('option1')) {
this.showDialog1();
} else if (activeNames.includes('option2')) {
this.showDialog2();
} else {
this.dialog1Visible = false;
this.dialog2Visible = false;
}
},
showDialog1() {
this.dialog1Visible = true;
this.dialog2Visible = false;
},
showDialog2() {
this.dialog1Visible = false;
this.dialog2Visible = true;
}
}
};
</script>
```
相关推荐
![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)