轮播表

轮播表可以单条轮播也可以整页轮播，支持点击事件，展示数据使用v-html渲染，因此你可以传递html字符串，定制个性化元素。 （Vue版）

TIP

组件内部没有设置深度监听 props，数据变更时，请生成新的 props，不然组件将无法刷新状态

config.data = ['foo', 'foo']是无效的

config = { data: ['foo', 'foo'] }才是有效的

<ScrollBoard 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	---	---

onMouseOver事件

当鼠标悬浮在某个单元格上时（表头不支持），轮播表将抛出一个onMouseOver事件，包含被悬浮单元格的相关数据（与onClick事件数据相同）