# 轮播表

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

columnWidthalign允许尾部缺省:

// 三列轮播表
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>