本文來源於Element官方文件：

http://element-cn.eleme.io/#/zh-CN/component/collapse

基礎用法

普通摺疊面板

<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> 

帶slot的摺疊面板

<el-collapse accordion>
 <el-collapse-item>
  <template slot="title">
   一致性 Consistency<i class="header-icon el-icon-info"></i>
  </template>
  <div>與現實生活一致：與現實生活的流程、邏輯保持一致，遵循使用者習慣的語言和概念；</div>
  <div>在介面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖示和文字、元素的位置等。</div>
 </el-collapse-item>
 <el-collapse-item title="反饋 Feedback">
  <div>控制反饋：通過介面樣式和互動動效讓使用者可以清晰的感知自己的操作；</div>
  <div>頁面反饋：操作後，通過頁面元素的變化清晰地展現當前狀態。</div>
 </el-collapse-item>
 <el-collapse-item title="效率 Efficiency">
  <div>簡化流程：設計簡潔直觀的操作流程；</div>
  <div>清晰明確：語言表達清晰且表意明確，讓使用者快速理解進而作出決策；</div>
  <div>幫助使用者識別：介面簡單直白，讓使用者快速識別而非回憶，減少使用者記憶負擔。</div>
 </el-collapse-item>
 <el-collapse-item title="可控 Controllability">
  <div>使用者決策：根據場景可給予使用者操作建議或安全提示，但不能代替使用者進行決策；</div>
  <div>結果可控：使用者可以自由的進行操作，包括撤銷、回退和終止當前操作等。</div>
 </el-collapse-item>
</el-collapse>

Collapse Attributes

引數	說明	型別	可選值	預設值
accordion	是否手風琴模式	boolean	—	false
value	當前啟用的面板(如果是手風琴模式，繫結值型別需要為string，否則為array)	string/array	—	—

Collapse Events

事件名稱	說明	回撥引數
change	當前啟用面板改變時觸發(如果是手風琴模式，引數 activeNames 型別為string，否則為array) (activeNames: array	string)

Collapse Item Attributes

引數	說明	型別	可選值	預設值
name	唯一標誌符	string/number	—	—
title	面板標題	string	—	—

手風琴效果

<el-collapse v-model="activeName" accordion>
 <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>
<script>
 export default {
  data() {
   return {
    activeName: '1'
   };
  }
 }
</script>

自定義面板標題

<el-collapse accordion>
 <el-collapse-item>
  <template slot="title">
   一致性 Consistency<i class="header-icon el-icon-info"></i>
  </template>
  <div>與現實生活一致：與現實生活的流程、邏輯保持一致，遵循使用者習慣的語言和概念；</div>
  <div>在介面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖示和文字、元素的位置等。</div>
 </el-collapse-item>
 <el-collapse-item title="反饋 Feedback">
  <div>控制反饋：通過介面樣式和互動動效讓使用者可以清晰的感知自己的操作；</div>
  <div>頁面反饋：操作後，通過頁面元素的變化清晰地展現當前狀態。</div>
 </el-collapse-item>
 <el-collapse-item title="效率 Efficiency">
  <div>簡化流程：設計簡潔直觀的操作流程；</div>
  <div>清晰明確：語言表達清晰且表意明確，讓使用者快速理解進而作出決策；</div>
  <div>幫助使用者識別：介面簡單直白，讓使用者快速識別而非回憶，減少使用者記憶負擔。</div>
 </el-collapse-item>
 <el-collapse-item title="可控 Controllability">
  <div>使用者決策：根據場景可給予使用者操作建議或安全提示，但不能代替使用者進行決策；</div>
  <div>結果可控：使用者可以自由的進行操作，包括撤銷、回退和終止當前操作等。</div>
 </el-collapse-item>
</el-collapse>

到此這篇關於Element Collapse 摺疊面板的使用方法的文章就介紹到這了,更多相關Element Collapse 摺疊面板內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！