DataV

# 轮播表

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

# 基本轮播表

行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 {
  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']
  ]
}

# 附带表头

列1
列2
列3
行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']
  ]
}

# 附带行号

#
列1
列2
列3
1
行1列1
行1列2
行1列3
2
行2列1
行2列2
行2列3
3
行3列1
行3列2
行3列3
4
行4列1
行4列2
行4列3
5
行5列1
行5列2
行5列3
6
行6列1
行6列2
行6列3
7
行7列1
行7列2
行7列3
8
行8列1
行8列2
行8列3
9
行9列1
行9列2
行9列3
10
行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']
}

# 整页滚动

#
列1
列2
列3
1
行1列1
行1列2
行1列3
2
行2列1
行2列2
行2列3
3
行3列1
行3列2
行3列3
4
行4列1
行4列2
行4列3
5
行5列1
行5列2
行5列3
6
行6列1
行6列2
行6列3
7
行7列1
行7列2
行7列3
8
行8列1
行8列2
行8列3
9
行9列1
行9列2
行9列3
10
行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'],
  carousel: 'page'
}

# 定制元素

#
列1
列2
列3
1
行1列1
行1列2
行1列3
2
行2列1
行2列2
行2列3
3
行3列1
行3列2
行3列3
4
行4列1
行4列2
行4列3
5
行5列1
行5列2
行5列3
6
行6列1
行6列2
行6列3
7
行7列1
行7列2
行7列3
8
行8列1
行8列2
行8列3
9
行9列1
行9列2
行9列3
10
行10列1
行10列2
行10列3
点击以展示/隐藏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>

← 排名轮播表 →