首页elementUI如何根据不同的el-collapse-item的name的不同，打开不同的Dialog

elementUI如何根据不同的el-collapse-item的name的不同，打开不同的Dialog

时间: 2024-02-12 09:08:46 浏览: 82

可以通过在el-collapse-item中绑定一个点击事件，在事件中根据不同的name值来打开不同的Dialog。具体的实现方式如下： 1. 在el-collapse-item中绑定一个点击事件，代码如下： ```html <el-collapse-item v-for="(item, index) in list" :key="index" :name="item.name" @click="openDialog(item.name)"> <template slot="title"> {{ item.title }} </template> <p>{{ item.content }}</p> </el-collapse-item> ``` 2. 在事件处理函数中根据不同的name值来打开不同的Dialog，代码如下： ```javascript methods: { openDialog(name) { switch (name) { case 'dialog1': this.dialog1Visible = true; break; case 'dialog2': this.dialog2Visible = true; break; case 'dialog3': this.dialog3Visible = true; break; default: break; } } } ``` 在这个示例中，我们假设有三个Dialog，分别对应的name值为dialog1、dialog2和dialog3，通过switch语句判断当前点击的el-collapse-item的name值，然后打开对应的Dialog。

阅读全文