轮播表

轮播表可以单条轮播也可以整页轮播，支持点击事件，展示数据使用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>