el-collapse的change

el-collapse的change事件是指当折叠面板的展开状态发生改变时触发的事件。在这个事件中，可以通过回调函数获取到当前展开的折叠面板的name值，从而可以进行相应的操作。比如可以根据name值来判断展开的是哪个折叠面板，并执行相应的逻辑。

在你提供的代码中，el-collapse的change事件被绑定到了handleChange方法上。在这个方法中，可以通过参数event来获取到当前展开的折叠面板的name值，然后可以根据name值执行相应的逻辑。

需要注意的是，el-collapse的change事件不是默认就会触发的，需要在使用el-collapse组件时，通过设置v-model来绑定一个变量，然后在change事件中更新这个变量的值，从而触发change事件。

除了change事件，el-collapse还提供了其他一些事件和方法，比如collapse、expand、toggle等，可以用来操作和控制折叠面板的展开状态。具体的使用可以参考官方文档或相关教程。

相关问题

el-collapse change用法

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 ]

<div > <el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="一致性 Consistency" name="1"> <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div> <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div> </el-collapse-item> <el-collapse-item title="反馈 Feedback" name="2"> <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div> <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div> </el-collapse-item> <el-collapse-item title="效率 Efficiency" name="3"> <div>简化流程：设计简洁直观的操作流程；</div> <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div> <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div> </el-collapse-item> <el-collapse-item title="可控 Controllability" name="4"> <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div> <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div> </el-collapse-item> </el-collapse> </div> 设置为每一个el-collapse-item独占一行

你可以在每个el-collapse-item的外层加一个div，并设置这个div的样式为display: block，就可以让每个el-collapse-item独占一行了。例如：

<div>
  <el-collapse v-model="activeNames" @change="handleChange">
    <div style="display: block;">
      <el-collapse-item title="一致性 Consistency" name="1">
        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
      </el-collapse-item>
    </div>
    <div style="display: block;">
      <el-collapse-item title="反馈 Feedback" name="2">
        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
      </el-collapse-item>
    </div>
    <div style="display: block;">
      <el-collapse-item title="效率 Efficiency" name="3">
        <div>简化流程：设计简洁直观的操作流程；</div>
        <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
        <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
      </el-collapse-item>
    </div>
    <div style="display: block;">
      <el-collapse-item title="可控 Controllability" name="4">
        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
      </el-collapse-item>
    </div>
  </el-collapse>
</div>