前言：
使用elementUI折叠组件+导航菜单组件时，有个问题，就是导航菜单关闭上，折叠组件的小箭头没有被隐藏。再加上项目要求使用三角形的图标，正好自己做一个吧。
如图所示：
1.制作三角形图标
想要什么方向的三角，只需设置border-color即可
我是弄了个span标签，给一个动态的类控制
参考代码：
<span :class="[sanjiao == cot && sanjiaoTorF ? 'sanJiaoBot':'sanJiaoTop']" ></span>
/* 小三角朝上 */ .sanJiaoTop{ display: inline-block; width:0px; height:0px; border-width:10px; border-style:solid; margin-bottom: 10px; border-color:transparent transparent #4c7ae3 transparent; } /* 小三角朝下 */ .sanJiaoBot{ display: inline-block; width:0px; height:0px; border-width:10px; border-style:solid; line-height: 68px; border-color:#e71708 transparent transparent transparent; }
2.完整的功能步骤（详细）
第一步，data里面定义个变量，v-for渲染的每一项，设置点击事件，让index等于你设置的变量xxx
第二步，data里面再定义个变量，默认为false,再上一步点击事件中，取反
第三步，修改图标的样式
相关参考代码：
<el-collapse-item title="标题" class="padding0 " @click.native="ceshiSanjiao(cot)">
<span :class="[sanjiao == cot && sanjiaoTorF ? 'sanJiaoBot':'sanJiaoTop']" ></span>
ceshiSanjiao (cot) { this.sanjiao = cot this.sanjiaoTorF = !this.sanjiaoTorF },
3.注意点
有可能点击事件会冒泡或者其他默认事件被触发，解决方法是子级设置点击事件，@click.stop = xx,即可
