例：datav中輪播表組件只支持修改表頭，內(nèi)容的背景顏色勾怒，需求是需要改為使用背景圖
<dv-scroll-board :config="config" style="width:500px;height:220px" />
config屬性
<colgroup><col style="width: 132.4px;"><col style="width: 132.4px;"><col style="width: 132.4px;"><col style="width: 132.4px;"><col style="width: 132.4px;"></colgroup>
|
屬性
|
說明
|
類型
|
可選值
|
默認(rèn)值
|
|
header
|
表頭數(shù)據(jù)
|
Array
|
|
[]
|
|
data
|
表數(shù)據(jù)
|
Array<array></array>
|
|
[]
|
|
rowNum
|
表行數(shù)
|
Number
|
|
5
|
|
headerBGC
|
表頭背景色
|
String
|
|
'#00BAFF'
|
|
oddRowBGC
|
奇數(shù)行背景色
|
String
|
|
'#003B51'
|
|
evenRowBGC
|
偶數(shù)行背景色
|
String
|
|
0A2732
|
|
waitTime
|
輪播時(shí)間間隔(ms)
|
Number
|
|
2000
|
|
headerHeight
|
表頭高度
|
Number
|
|
35
|
|
columnWidth
|
列寬度
|
Array
|
[1]
|
[]
|
|
align
|
列對(duì)齊方式
|
Array
|
[2]
|
[]
|
|
index
|
顯示行號(hào)
|
Boolean
|
true|false
|
false
|
|
indexHeader
|
行號(hào)表頭
|
String
|
|
'#'
|
|
carousel
|
輪播方式
|
String
|
'single'|'page'
|
'single'
|
|
hoverPause
|
懸浮暫停輪播
|
Boolean
|
|
true
|
官方組件相關(guān)代碼
<div class="dv-scroll-board" :ref="ref"> <div class="header" v-if="header.length && mergedConfig" :style="background-color: ${mergedConfig.headerBGC};"> <div class="header-item" v-for="(headerItem, i) in header" :key="${headerItem}${i}" :style="height: ${mergedConfig.headerHeight}px; line-height: ${mergedConfig.headerHeight}px; width: ${widths[i]}px;" :align="aligns[i]" v-html="headerItem" /> </div>
由此可看出通過配置config將背景色綁定到了style中谒拴，這就導(dǎo)致我們?cè)陧撁嬷袩o法覆蓋樣式
錯(cuò)誤覆蓋樣式代碼：
<style lang="scss" scoped> .table .dv-scroll-board .header{ background-image: url('~@/assets/列表_表頭背景.png') !important } </style>
正確覆蓋樣式代碼：
去掉 scoped 關(guān)鍵字串结，因?yàn)閟coped是對(duì)當(dāng)前文件生效的蒿柳，而引入的組件并不在此文件內(nèi)，所以導(dǎo)致樣式無法覆蓋
<style lang="scss"> .table .dv-scroll-board .header{ background-image: url('~@/assets/列表_表頭背景.png') !important; background-size: 100% !important; } </style>
關(guān)于 定制元素 只能使用html標(biāo)簽岳枷，不能引入Vue組件
var item = [i, '五常西溪風(fēng)情', '98/45','<span syle="" class=""></span>'] var item = [i, '五常西溪風(fēng)情', '98/45',<el-button class="" />] 無法顯示
可選用第一種芒填，在中定義樣式
例：
<script> createList(){ var list = []; for (let i = 1; i <= 8; i++) { var percentStr = ' <div class="item"><div class="box"><div class="percent percent-1"><div class="percent-value percent-value-1]" style="width: 100%"></div></div></div><div class="value">30%</div></div>'; var item = [i, '五常西溪風(fēng)情', '98/45',percentStr] list.push(item) } this.config = { waitTime:1000, rowNum:4, headerBGC:'', // oddRowBGC:'', evenRowBGC:'rgb(64,121,167,.0.2)', columnWidth:[50,120,120,80], header: ['排名', '小區(qū)名稱', '整改流轉(zhuǎn)/完成','占比數(shù)'], data: list }; }, </script> <style lang="scss"> .item {} </style>
