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

news2024/11/15 15:48:51

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

样式更改箭头指向
: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) 试试

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2037905.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！