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

TIP

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

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

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

columnWidth可以配置每一列的宽度,默认情况下每一列宽度相等。

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

TIP

columnWidth与align允许尾部缺省:

// 三列轮播表 columnWidth: [50] // 剩下两列宽度将自动计算 #click事件 当单元格被点击时(表头不支持),轮播表将抛出一个click事件,包含被点击的单元格的相关数据,打开控制台并点击上面例子中的轮播表可以查看事件数据。

#click事件数据属性 属性 说明 类型 可选值 默认值 row 所在行数据 Array --- [] rowIndex 行索引 Number --- --- columnIndex 列索引 Number --- --- #mouseover事件 当鼠标悬浮在某个单元格上时(表头不支持),轮播表将抛出一个mouseover事件,包含被悬浮单元格的相关数据(与click事件数据相同)。

#updateRows方法alpha 如果想要不断追加行数据,又不想从头开始轮播,可以使用此方法更新行数据,不会导致从头轮播,也可以设置下次滚动的起始行。

/**

  • @param {string[][]} rows 更新后的行数据
  • @param {number} index 下次滚动的起始行 (可缺省) */ function updateRows(rows, index) { // ... }