ElementPlus Collapse 折疊面板

Collapse 折疊面板

通過折疊面板收納內(nèi)容區(qū)域

基礎(chǔ)用法

可同時展開多個面板，面板之間不影響

<template>
  <el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item title="一致性 Consistency" name="1">
    <div>
      與現(xiàn)實生活一致：與現(xiàn)實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；
    </div>
    <div>
      在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計樣式、圖標和文本、元素的位置等。
    </div>
  </el-collapse-item>
  <el-collapse-item title="反饋 Feedback" name="2">
    <div>控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；</div>
    <div>頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當前狀態(tài)。</div>
  </el-collapse-item>
  <el-collapse-item title="效率 Efficiency" name="3">
    <div>簡化流程：設(shè)計簡潔直觀的操作流程；</div>
    <div>清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；</div>
    <div>
      幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。
    </div>
  </el-collapse-item>
  <el-collapse-item title="可控 Controllability" name="4">
    <div>
      用戶決策：根據(jù)場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；
    </div>
    <div>
      結(jié)果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。
    </div>
  </el-collapse-item>
</el-collapse>
</template>

<script>
  export default {
    data() {
      return {
        activeNames: ['1'],
      }
    },
    methods: {
      handleChange(val) {
        console.log(val)
      },
    },
  }
</script>

手風琴效果

每次只能展開一個面板

通過 accordion 屬性來設(shè)置是否以手風琴模式顯示。

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

<script>
  export default {
    data() {
      return {
        activeName: '1',
      }
    },
  }
</script>

自定義面板標題

除了可以通過 title 屬性以外，還可以通過具名 slot 來實現(xiàn)自定義面板的標題內(nèi)容，以實現(xiàn)增加圖標等效果。

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

Collapse Attributes

Collapse Events

Collapse Item Attributes

Collapse Item Slot