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属性

属性|说明|类型|可选值|默认值 :--:|:--:|:--:|:--:|:--: 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'

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

scrollBoard.md 4.0 KB Permalink History Raw