vue修改element子组件样式

用的element组件是Collapse折叠面板，可以同时展开多个。

把折叠面板和表格结合，选中一个折叠面板的时候，可以对右侧表格进行筛选。

但是自己实现后感觉交互效果不是很好，因为同时展开多个后，可能会不知道右侧表格，究竟对哪个数据进行了筛选。

由于基础用法的collapse的触发，是用一个数组记录，将放入数组中所有的id对应的面板都展开

我的对表格筛选是取activeNames数组最后一个，也就是最后点击的面板id，去筛选右侧表格。因此想法也是吧数组最后一个进行高亮区分。

实现思路：给el-collapse-item绑定class，并判断当前用v-for渲染出来的item.id和从数组中取出的最后一个id是否相同，相同的话，就绑定上一个类名

但是并没有那么简单o(╥﹏╥)o

<el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item
    v-for="item in treeOptions"
    :key="item.id"
    :title="item.label"
    :name="item.id"
    :class="item.id==filterRes? 'head_active':''">
  </el-collapse-item>
</el-collapse>

.head_active {
    color: #409eff;
}

虽然绑定上去了，但是并没有绑定在显示文字内容的那层div，而是外层的div，而element对文字那层的div还有设置样式，外层样式不能通过修改样式来覆盖内层样式o(╥﹏╥)o

然后各种尝试…………终于找到修改覆盖的方法了

原本文字内容层的div激活时的样式↓ （element源码）

.el-collapse-item__header.is-active {
  border-bottom-color: transparent;
}

覆盖样式的写法

::v-deep .head_active .el-collapse-item__header.is-active {
  border-bottom-color: transparent;
  color: #409EFF
}

成功覆盖掉了！耶！