例：datav中輪播表組件只支持修改表頭，內容的背景顏色，需求是需要改爲使用背景圖
<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>
|
屬性
|
說明
|
類型
|
可選值
|
默認值
|
|
header
|
表頭數據
|
Array
|
|
[]
|
|
data
|
表數據
|
Array<array></array>
|
|
[]
|
|
rowNum
|
錶行數
|
Number
|
|
5
|
|
headerBGC
|
表頭背景色
|
String
|
|
'#00BAFF'
|
|
oddRowBGC
|
奇數行背景色
|
String
|
|
'#003B51'
|
|
evenRowBGC
|
偶數行背景色
|
String
|
|
0A2732
|
|
waitTime
|
輪播時間間隔(ms)
|
Number
|
|
2000
|
|
headerHeight
|
表頭高度
|
Number
|
|
35
|
|
columnWidth
|
列寬度
|
Array
|
[1]
|
[]
|
|
align
|
列對齊方式
|
Array
|
[2]
|
[]
|
|
index
|
顯示行號
|
Boolean
|
true|false
|
false
|
|
indexHeader
|
行號表頭
|
String
|
|
'#'
|
|
carousel
|
輪播方式
|
String
|
'single'|'page'
|
'single'
|
|
hoverPause
|
懸浮暫停輪播
|
Boolean
|
|
true
|
官方組件相關代碼
<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中，這就導致我們在頁面中無法覆蓋樣式
錯誤覆蓋樣式代碼：
<style lang="scss" scoped> .table .dv-scroll-board .header{ background-image: url('~@/assets/列表_表頭背景.png') !important } </style>
正確覆蓋樣式代碼：
去掉 scoped 關鍵字，因爲scoped是對當前文件生效的，而引入的組件並不在此文件內，所以導致樣式無法覆蓋
<style lang="scss"> .table .dv-scroll-board .header{ background-image: url('~@/assets/列表_表頭背景.png') !important; background-size: 100% !important; } </style>
關於 定製元素 只能使用html標籤，不能引入Vue組件
var item = [i, '五常西溪風情', '98/45','<span syle="" class=""></span>'] var item = [i, '五常西溪風情', '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, '五常西溪風情', '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: ['排名', '小區名稱', '整改流轉/完成','佔比數'], data: list }; }, </script> <style lang="scss"> .item {} </style>