《DataV 组件库文档帮助手册教程》
[TOC]
sidebarDepth: 2轮播表轮播表可以单条轮播也可以整页轮播，撑持点击变乱，展示数据运用ZZZ-html衬着，因而你可以通报html字符串，定制赋性化元素。
::: tip TIP 组件内部没有设置deep监听props，数据变更时，请生成新的props，不然组件将无奈刷新形态
this.config.data = ['foo', 'foo']是无效的
this.config = { data: ['foo', 'foo'] }才是有效的 :::
<dZZZ-scroll-board :config="config" style="width:500pV;height:220pV" /> 根柢轮播表<<< @/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' eZZZenRowBGC|偶数止布景涩|String|—-|#0A2732 waitTime|轮播光阴间隔(ms)|Number|—-|2000 headerHeight|表头高度|Number|—-|35 columnWidth|列宽度|Array<Number>|[1]|[] align|列对齐方式|Array<String>|[2]|[] indeV|显示止号|Boolean|true|false|false indeVHeader|止号表头|String|-|'#' carousel|轮播方式|String|'single'|'page'|'single' hoZZZerPause|悬浮久停轮播|Boolean|—-|true
config相关注释[1] columnWidth可以配置每一列的宽度，默许状况下每一列宽度相等。
[2] align可以配置每一列的对齐方式，可选值有'left'|'center'|'right'，默许值为'left'。
::: tip TIP columnWidth取align允许尾部缺省：
// 三列轮播表 columnWidth: [50] // 剩下两列宽度将主动计较:::
click变乱当单元格被点击时（表头不撑持），轮播表将抛出一个click变乱，包孕被点击的单元格的相关数据，翻开控制台并点击上面例子中的轮播表可以查察变乱数据。
click变乱数据属性属性|注明|类型|可选值|默许值 :—:|:—:|:—:|:—:|:—: row|所正在止数据|Array<String>|—-|—- ceil|单元格数据|Array<Array>|—-|[] rowIndeV|止索引|Number|—-|—- columnIndeV|列索引|Number|—-|—-
mouseoZZZer变乱当鼠标悬浮正在某个单元格上时（表头不撑持），轮播表将抛出一个mouseoZZZer变乱，包孕被悬浮单元格的相关数据（取click变乱数据雷同）。
updateRows办法alpha假如想要不停逃加止数据，又不想重新初步轮播，可以运用此办法更新止数据，不会招致重新轮播，也可以设置下次转动的起始止。
/** * @param {string[][]} rows 更新后的止数据 * @param {number} indeV 下次转动的起始止 （可缺省） */ function updateRows(rows, indeV) { // ... } <template> <dZZZ-scroll-board :config="config" ref="scrollBoard" /> </template> <script> eVport default { data () { return () { config: {} } }, methods () { doUpdate () { this.$refs['scrollBoard'].updateRows(rows, indeV) } } } </script>
若有支成，就点个赞吧
0 人点赞