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

项目场景：

根据传过来的数据类型判断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,
    msg:"eeee"
  },
  {
        id:4,

    type:2,
    msg:"ssss"
  }]
  
)

 

js层 

<script lang="ts" setup>
import { reactive } from 'vue'


//将v-for的遍历值传给btn按钮
const btn =(item)=>{
console.log(item)
  if(item.msg==="hhhhhh"){
    console.log(222)
  }else if(item.msg==="wwww"){
     console.log(2222333)
  }else if(item.msg==="eeee"){
     console.log(44444)
  }else{
    console.log(656565)
  }

  }
</script>

---

完整代码： 

//如果数据返回为对象。自己手动对外包一层[],为数组形式，v-for只能遍历数组
<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>

<script lang="ts" setup>
import { reactive } from 'vue'
const list=reactive(
 
 [ {
    id:1,
    type:1,
    msg:"hhhhhh"
  },
  {
        id:2,

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

    type:1,
    msg:"eeee"
  },
  {
        id:4,

    type:2,
    msg:"ssss"
  }]
  
)

//将v-for的遍历值传给btn按钮
const btn =(item)=>{
console.log(item)
  if(item.msg==="hhhhhh"){
    console.log(222)
  }else if(item.msg==="wwww"){
     console.log(2222333)
  }else if(item.msg==="eeee"){
     console.log(44444)
  }else{
    console.log(656565)
  }

  }
</script>

 效果截图：

---

作者上一篇文章，

vue3+ElementPlus踩坑之图标icon的使用_意初的博客-CSDN博客vue3+ElementPlus踩坑之图标icon的使用在所需要的按钮里加上：icon。在单页面里引入需要使用的图标。正在上传…重新上传取消https://blog.csdn.net/weixin_43928112/article/details/126217933https://blog.csdn.net/weixin_43928112/article/details/126217933