# 轮播表
轮播表可以单条轮播也可以整页轮播,支持点击事件,展示数据使用v-html渲染,因此你可以传递html
字符串,定制个性化元素。
(React版 (opens new window))
TIP
组件内部没有设置deep
监听props,数据变更时,请生成新的props,不然组件将无法刷新状态
this.config.data = ['foo', 'foo']
是无效的
this.config = { data: ['foo', 'foo'] }
才是有效的
<dv-scroll-board :config="config" style="width:500px;height:220px" />
# 基本轮播表
点击以展示/隐藏config数据
export default {
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']
]
}
# 附带表头
点击以展示/隐藏config数据
export default {
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']
]
}
# 附带行号
点击以展示/隐藏config数据
export default {
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']
],
index: true,
columnWidth: [50],
align: ['center']
}
# 整页滚动
点击以展示/隐藏config数据
export default {
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']
],
index: true,
columnWidth: [50],
align: ['center'],
carousel: 'page'
}
# 定制元素
点击以展示/隐藏config数据
export default {
header: ['列1', '列2', '列3'],
data: [
['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],
['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],
['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],
['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],
['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],
['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],
['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],
['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3']
],
index: true,
columnWidth: [50],
align: ['center']
}
# config属性
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
header | 表头数据 | Array<String> | --- | [] |
data | 表数据 | Array<Array> | --- | [] |
rowNum | 表行数 | Number | --- | 5 |
headerBGC | 表头背景色 | String | --- | '#00BAFF' |
oddRowBGC | 奇数行背景色 | String | --- | '#003B51' |
evenRowBGC | 偶数行背景色 | String | --- | #0A2732 |
waitTime | 轮播时间间隔(ms) | Number | --- | 2000 |
headerHeight | 表头高度 | Number | --- | 35 |
columnWidth | 列宽度 | Array<Number> | [1] | [] |
align | 列对齐方式 | Array<String> | [2] | [] |
index | 显示行号 | Boolean | true|false | false |
indexHeader | 行号表头 | String | - | '#' |
carousel | 轮播方式 | String | 'single'|'page' | 'single' |
hoverPause | 悬浮暂停轮播 | Boolean | --- | true |
# config相关注释
[1] columnWidth
可以配置每一列的宽度,默认情况下每一列宽度相等。
[2] align
可以配置每一列的对齐方式,可选值有'left'|'center'|'right'
,默认值为'left'
。
TIP
columnWidth
与align
允许尾部缺省:
// 三列轮播表
columnWidth: [50]
// 剩下两列宽度将自动计算
# click事件
当单元格被点击时(表头不支持),轮播表将抛出一个click
事件,包含被点击的单元格的相关数据,打开控制台并点击上面例子中的轮播表可以查看事件数据。
# click事件数据属性
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
row | 所在行数据 | Array<String> | --- | --- |
ceil | 单元格数据 | Array<Array> | --- | [] |
rowIndex | 行索引 | Number | --- | --- |
columnIndex | 列索引 | Number | --- | --- |
# mouseover事件
当鼠标悬浮在某个单元格上时(表头不支持),轮播表将抛出一个mouseover
事件,包含被悬浮单元格的相关数据(与click事件数据相同)。
# updateRows方法alpha
如果想要不断追加行数据,又不想从头开始轮播,可以使用此方法更新行数据,不会导致从头轮播,也可以设置下次滚动的起始行。
/**
* @param {string[][]} rows 更新后的行数据
* @param {number} index 下次滚动的起始行 (可缺省)
*/
function updateRows(rows, index) {
// ...
}
<template>
<dv-scroll-board :config="config" ref="scrollBoard" />
</template>
<script>
export default {
data () {
return () {
config: {}
}
},
methods () {
doUpdate () {
this.$refs['scrollBoard'].updateRows(rows, index)
}
}
}
</script>