如何修改element-ui中折叠面板右侧的默认图标

第一步，先把右边的箭头给隐藏了 这个需要用到穿透 下面是css代码

::v-deep .el-collapse-item__arrow{
  display: none;
}

//下方两个是打开和关闭的图标
.downArrow1{
  display: inline-block;
  width: 13px;
  height: 16px;
  background-image: url(~@/assets/images/downArrow1.png);
}

.downArrow2{
  display: inline-block;
  width: 13px;
  height: 16px;
  background-image: url(~@/assets/images/downArrow1.png);
  transform: rotate(-180deg);
}

//头部穿透，让头部内容在两端，本身固有属性是flex
::v-deep .el-collapse-item__header {
    justify-content: space-between;
       
}

然后试用具名插槽把头部内容替换掉

<el-collapse v-model="activeNames" @change="handleChange">
   <el-collapse-item name="1" >
     <template slot="title">
      第一部分 单选题 <i :class="judgeActive('1')!==-1? 'downArrow2':'downArrow1'"></i>
      </template>
    <ul>
    内容
    </ul>
  </el-collapse-item>
</el-collapse>

这个时候折叠面板绑定的是 activeNames: ["1"],这个数组，这个时候需要一个函数监听是否含有改面板的name

//判断是否打开
judgeActive(data){
  return   this.activeNames.indexOf(data)
},

这样就能实现图标的来回翻转了