效果圖：

一、默認(rèn)全部關(guān)閉?

1. 首先需要在折疊面板中綁定activeName，activeName用來(lái)裝每個(gè)面板的唯一標(biāo)識(shí)

2.在切換左側(cè)規(guī)則時(shí)設(shè)置activeNames為空數(shù)組即可將全部的Collapse 設(shè)置為關(guān)閉狀態(tài)

<el-collapse v-model="activeName">
 <el-collapse-item/> //中間是具體的每一個(gè)面板 都是通過(guò)后臺(tái)傳過(guò)來(lái)的列表進(jìn)行循環(huán)顯示的
 <el-collapse-item/>
</el-collapse>

?二、自定義圖標(biāo)（需求：1.需要隱藏右側(cè)的默認(rèn)圖標(biāo) 2.在標(biāo)題最左側(cè)添加自定義圖標(biāo) 3.根據(jù)折疊和顯示改變自定義圖標(biāo)的箭頭方向

1.首先隱藏右側(cè)的默認(rèn)圖標(biāo)：審查元素可以看到右側(cè)圖標(biāo)有自己的標(biāo)簽，直接隱藏掉（scoped下注意要用樣式穿透

.right-collapse {
  height: 700px;
//隱藏原始圖標(biāo)
  :deep().el-collapse-item__arrow {
    display: none;
  }
}

?2.通過(guò)插槽自定義頭部圖標(biāo)利用v-bind綁定動(dòng)態(tài)類名，給面板綁定事件

<el-collapse v-model="activeNames" @change="handleChange($event)">
                  <el-collapse-item v-for="(item, index) in totalData.collapseList" :key="index" :name="index" @click="show_collapse(item)">
                    <template #title>
                      <i class="el-icon-caret-right iconcolor" :class="{ 'collapse-active': item.isActive }" style="margin: 0 5px"></i>
                      {{ item.CalcName + '計(jì)算值' }}
                    </template>
                    <div class="p-5">
                      <div class="collapse-item-content">
                        <div>
                          <span>{{ '=' + item.CalcExp }}</span>
                        </div>
                        <el-divider></el-divider>
                        <el-row :gutter="20">
                          <el-col :span="6" v-for="(itm, idx) in item.Args" :key="idx" class="m-b-10">
                            <el-input :placeholder="'輸入' + itm.FieldDisplayName" size="small" v-model="itm.DefaultValue"></el-input>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>

?3.面板折疊、打開(kāi)實(shí)現(xiàn)圖標(biāo)切換

show_collapse(item) {
   item.isActive = !item.isActive
   
}

?3.樣式

.collapse-active {
  transform: rotate(90deg);
}

?參考：折疊面板點(diǎn)擊事件改變自定義圖標(biāo)_el-collapse-item 點(diǎn)擊事件_cira@yeah.net996的博客-CSDN博客文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-619397.html

到了這里，關(guān)于自定義Collapse 折疊面板的下拉圖標(biāo)，以及切換數(shù)據(jù)渲染Collapse 時(shí)實(shí)現(xiàn)設(shè)置Collapse 默認(rèn)全部關(guān)閉的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！