html5 css3 前端 自定义Collapse 折叠面板的下拉图标，以及切换数据渲染Collapse 时实现设置Collapse 默认全部关闭

效果图：

一、默认全部关闭 

1. 首先需要在折叠面板中绑定activeName，activeName用来装每个面板的唯一标识

2.在切换左侧规则时设置activeNames为空数组即可将全部的Collapse 设置为关闭状态

//中间是具体的每一个面板 都是通过后台传过来的列表进行循环显示的

 二、自定义图标（需求：1.需要隐藏右侧的默认图标 2.在标题最左侧添加自定义图标 3.根据折叠和显示改变自定义图标的箭头方向

1.首先隐藏右侧的默认图标：审查元素可以看到右侧图标有自己的标签，直接隐藏掉（scoped下注意要用样式穿透

.right-collapse {

height: 700px;

//隐藏原始图标

:deep().el-collapse-item__arrow {

display: none;

}

}

 2.通过插槽自定义头部图标利用v-bind绑定动态类名，给面板绑定事件

 3.面板折叠、打开实现图标切换

show_collapse(item) {

item.isActive = !item.isActive

}

 3.样式

.collapse-active {

transform: rotate(90deg);

}

 参考：折叠面板点击事件改变自定义图标_el-collapse-item 点击事件_cira@yeah.net996的博客-CSDN博客

文章链接