elementUI如何根据不同的el-collapse-item打开不同的Dialog
时间: 2024-01-09 09:03:59 浏览: 38
您可以在`el-collapse-item`中绑定一个`click`事件,在事件中获取当前被点击的`el-collapse-item`的`name`属性,然后根据`name`属性的不同来判断需要打开哪个`Dialog`,然后调用该`Dialog`的`open()`方法即可。具体实现代码如下:
```html
<template>
<el-collapse>
<el-collapse-item name="dialog1" @click="openDialog">
<template slot="title">
<span>打开对话框1</span>
</template>
<!-- 这里是 el-collapse-item 的内容 -->
</el-collapse-item>
<el-collapse-item name="dialog2" @click="openDialog">
<template slot="title">
<span>打开对话框2</span>
</template>
<!-- 这里是 el-collapse-item 的内容 -->
</el-collapse-item>
</el-collapse>
</template>
<script>
export default {
methods: {
openDialog(event) {
const dialogName = event.target.getAttribute("name");
if (dialogName === "dialog1") {
this.$refs.dialog1.open();
} else if (dialogName === "dialog2") {
this.$refs.dialog2.open();
}
},
},
};
</script>
```
在上面的代码中,我们在`el-collapse-item`上绑定了一个`click`事件,并在事件中获取了当前被点击的`el-collapse-item`的`name`属性,然后根据`name`属性的不同来判断需要打开哪个`Dialog`,最后调用该`Dialog`的`open()`方法即可。需要注意的是,我们需要在`Dialog`组件中给它们分别添加一个`ref`,以便在方法中调用它们的`open()`方法。
相关推荐
![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)