1. 點擊面板觸發(fā)事件?@change
<el-collapse accordion v-model="activeNames" @change="handleChange">
<el-collapse-item title="一致性 Consistency">
<div>與現(xiàn)實生活一致：與現(xiàn)實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；</div>
<div>在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設計樣式、圖標和文本、元素的位置等。</div>
</el-collapse-item>
</el-collapse>
handleChangeDemo(val) {
debugger
},
若是點擊某一行觸發(fā)事件@click.native，試過@click無效，@click.native就可以了!
<el-collapse-item v-for="item in productInfoList" @click.native="searchData(item)">
<div>簡化流程：設計簡潔直觀的操作流程；</div>
</el-collapse-item>
searchData(item) {
// 查詢模板
debugger
},2.?折疊面板時，點擊標題欄的按鈕不展開面板內(nèi)容：
?通過設置@click.stop="showCollapse()"，阻止冒泡，點擊按鈕不再開展。
<el-collapse accordion @change="handleChangeDemo">
<!-- LI -->
<el-collapse-item>
<template slot="title">
標題1 <i class="header-icon el-icon-info" @click.stop="showCollapse()"/>
</template>
<div>
與現(xiàn)實生活一致：與現(xiàn)實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；
</div>
</el-collapse-item>
<!-- LI -->
<el-collapse-item title="效率 Efficiency">
<div>簡化流程：設計簡潔直觀的操作流程；</div>
</el-collapse-item>
</el-collapse>
showCollapse() {
debugger
}3.?想要改變折疊面板中icon位置
.ep-collapse-item__arrow {
flex: 1 0 auto;
order: -1;
}樣式如下文章來源：http://www.zghlxwxcb.cn/news/detail-677420.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-677420.html
到了這里，關(guān)于element Collapse 折疊面板 綁定事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
