关于修改datav 轮播表背景图
例：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>
