element 的 el-collapse UI样式调整？点击事件监听不到？

最新推荐文章于 2025-04-02 10:12:06 发布

Dark_programmer

最新推荐文章于 2025-04-02 10:12:06 发布

阅读量4.8k

点赞数

分类专栏： elementUI 文章标签： vue

本文链接：https://blog.csdn.net/Dark_programmer/article/details/112328632

版权

elementUI 专栏收录该内容

19 篇文章

订阅专栏

今天在开发的过程中，遇到一个问题，特此记录。

项目的一个功能所需类似手风琴的效果，因为是VUE，所以选择采用element的el-collapse。

<div class='mine'>
 <el-collapse accordion>
   <div
    v-for="item in titleList"
    :key="item.id"
     @click="clickHandle(item)"
     >
      <el-collapse-item>
        <template slot="title">{{item.title}}</template>
        {{alignsItem.name}}
      </el-collapse-item>
   </div>
 </el-collapse-item>
</div>

但是默认的样式会很丑，该如何默认修改样式呢？
我采用的是 v-deep

.mine{
::v-deep {
        .el-collapse {
          box-sizing: border-box;
          padding-left: 25px;
          border: none;
          .el-collapse-item__header {
            border: none;
            background-color: transparent;
          }
          .el-collapse-item__wrap {
            background-color: transparent;
            border: none;
            .el-collapse-item__content {
              padding: 0;
            }
          }
        }
      }}