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

今天遇到一个换图标的，找了好多人的博客都没清晰的解决我的问题，还是自己写一个吧

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

>>>.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
 >>> .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)
    },

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