今个同事问我这个datav轮播表表头颜色咋改,我说用它里面自带的属性headerBGC就行啊 (因为我之前就是这样直接用改成想要的颜色,but 在这个就不行,why?)
<template>
<dv-scroll-board :config="config" style="width:500px;height:220px" />
</template>
<script>
export default {
data(){
return {
config:{
header: ['列1', '列2', '列3'],
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
],
headerBGC:"rgba(0,0,0,0.5)",
oddRowBGC: "rgba(0,0,0,0.5)",
evenRowBGC: "rgba(0,0,0,0.5)",
},
}
},
}
</script>
but他说改不了,然后我自己试了试,果然改不了,后来发现是框架的头等级太高。然后试了一下行内样式、全局引入、直接深度渲染。。。。都不行
然后我就在外面包了 div,并给dv-scroll-board 加个class名用来确定是哪个的header,最后来了个深度渲染,它就成了!!
<template>
<div>
<dv-scroll-board class="board" :config="config" style="width:500px;height:220px" />
</div>
</template>
<script>
export default {
data(){
return {
config:{
header: ['列1', '列2', '列3'],
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
],
// headerBGC:"rgba(0,0,0,0.5)",
oddRowBGC: "rgba(0,0,0,0.5)",
evenRowBGC: "rgba(0,0,0,0.5)",
},
}
},
}
</script>
<style scoped>
/deep/ .board .header {
background-color: rgba(0,0,0,0.5) !important;
}
</style>