[TOC]

sidebarDepth: 2

轮播表

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

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

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

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

<dv-scroll-board :config="config" style="width:500px;height:220px" />

基本轮播表

<<< @/docs/guide/codeData/scrollBoard/demo1.js

附带表头

<<< @/docs/guide/codeData/scrollBoard/demo2.js

附带行号

<<< @/docs/guide/codeData/scrollBoard/demo3.js

整页滚动

<<< @/docs/guide/codeData/scrollBoard/demo4.js

定制元素

<<< @/docs/guide/codeData/scrollBoard/demo5.js

config属性

config相关注释

[1] columnWidth可以配置每一列的宽度，默认情况下每一列宽度相等。

[2] align可以配置每一列的对齐方式，可选值有'left'|'center'|'right'，默认值为'left'。

::: tip 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>