需求:vue项目中引入了vxe-grid插件,设置class后不生效。
<div class="wrap-container">
<vxe-grid
row-key
ref="xTable2"
class="sortable-tree-demo"
:scroll-y="{enabled: false}"
:columns="tableColumn"
:data="tableTreeData"
:tree-config="{children: 'children'}"
header-row-class-name="header-bag"
>
</vxe-grid>
<div @click="addInfo">添加</div>
</div>
<style scoped>
.header-bag {
color: #e60012;
}
</style>
标题行字体颜色设置为红色,没有生效
调试发现在header-bag样式后面多出了一行乱码,如下
.header-bag[data-v-51ff938a] {
color: #e60012;
}
通过度娘发现问题出在scoped,它会将作用域独立,只应用于本页面。然后子组件就访问不到。
解决方案:1、取消掉scoped。 2、穿透scoped
<style scoped>
.wrap-container >>> .header-bag {
color: #e60012;
}
</style>