vue3 更改 element-plus el-collapse 折叠面板样式

小刘先生很努力

已于 2024-08-14 14:31:03 修改

阅读量1.9k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

于 2024-08-14 13:53:33 首次发布

本文链接：https://blog.youkuaiyun.com/lzfengquan/article/details/141189095

官网提供
在这里插入图片描述
展示效果

样式更改箭头指向
:deep(.el-collapse-item__arrow){
transform: rotate(-270deg);
}
:deep(.el-collapse-item__header.is-active .el-collapse-item__arrow) {
transform: rotate(270deg);
}

二：或者隐藏右侧箭头
在这里插入图片描述
:deep(.el-collapse-item__arrow){
display:none;
}

效果
在这里插入图片描述
如果需要问题替换可以在代码中进行逻辑处理，也可以用样式改变

代码替换需要用到插槽

 <template #title>
   <div :class="item.flagActive ? 'headerRightTrue' : 'headerRightFlase'">
     <span class="spanFalse"></span>
     <div class="itemApproveTimeFalse">
       {{ approveTime }}
     </div>
     <div class="top-right">
       <div class="rightName"> 
         {{ submitter }}
         <span v-if="item?.nodeId"> 
           ({{item?.nodeId == 120 ? '方案' : ( item?.nodeId == 130 ? '商务活动' : (item?.nodeId == 140 ? '配套' : '' ))}}) 
         </span>
       </div>
       <span :class="item.flagActive ? 'headerRightspan1' : 'headerRightspan2'">
         {{ activeName.includes(index.toString()) ? '收起' : '展开' }}
       </span>
     </div>
   </div>
 </template>

在这里插入图片描述

下方是逻辑处理，默认是展开空，当页面打开后在去重新赋值默认第一个。
在这里插入图片描述
通过css 可以自行百度
应该是

.el-collapse-item__header:after {
  content: '展开';
  position: absolute;
  right: 0;
  top: 0;
  transition: transform 0.3s;
}
.el-collapse-item__wrap--active:after {
  content: '折叠';
  transform: rotate(180deg);
}

如果不生效可以加 :deep(.el-collapse-item__header:after) 试试