el-collapse change用法
时间: 2023-10-20 20:02:09 浏览: 59
Element UI中的el-collapse组件是一个折叠面板组件。在使用el-collapse组件时,可以通过绑定v-model来实现对面板的开启和关闭。当面板的状态发生改变时,会触发change事件。你可以通过在el-collapse上监听change事件,并在事件处理函数中进行相应的逻辑操作。
下面是el-collapse的change用法的示例代码:
```
<template>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item name="1">
<template slot="title">
第一部分 单选题
<i :class="judgeActive('1')!==-1? 'downArrow2':'downArrow1'"></i>
</template>
<ul>
内容
</ul>
</el-collapse-item>
</el-collapse>
</template>
```
在上面的代码中,v-model绑定了activeNames变量,用于记录当前开启的面板的name值。@change监听了change事件,事件处理函数为handleChange。
关于el-collapse的change用法,你可以在事件处理函数handleChange中编写相应的逻辑代码,比如在面板开启或关闭时进行一些操作。
希望以上信息对你有所帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [如何修改element-ui中折叠面板右侧的图标](https://blog.csdn.net/weixin_45243726/article/details/124862612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [Element组件库源码学习系列2(探究el-collapse)](https://blog.csdn.net/weixin_43742274/article/details/119349125)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]