vue3+ElementPlus踩坑：根据数据类型判断Collapse折叠面板的手风琴效果

最新推荐文章于 2025-09-11 04:46:14 发布

原创

最新推荐文章于 2025-09-11 04:46:14 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui #前端

本文介绍了如何在Vue3项目中结合ElementPlus库实现手风琴（Accordion）效果，通过v-for遍历数据并根据数据类型决定元素的显示与隐藏。同时展示了具体的HTML和TS代码段，以及点击事件处理函数btn()的实现，该函数根据item.msg的值进行不同操作。文章还强调了数据返回时需确保为数组格式以适应v-for的遍历需求。

项目场景：

根据传过来的数据类型判断elementui手风琴效果

问题描述

HTML层

<template>
  <div class="demo-collapse">
    <el-collapse  v-for="(item,index) in list" :key="index"   accordion>
      <el-collapse-item 
        title="Consistency" 
        v-if="item.type!==0" 
        @click="btn(item)" 
        :disabled="item.msg==='wwww'?true:false">
        <div >
         <span >
           {
  
  {item.msg}}
          </span>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

模拟数据

const list=reactive(
 
 [ {
    id:1,
    type:1,
    msg:"hhhhhh"
  },
  {
        id:2,

    type:1,
    msg:"wwww"
  },
  {
        id:3,

    type:1,
    ms