轮播表 |
您所在的位置：网站首页 › 轮播怎么轮 › 轮播表 |
|
# 轮播表 轮播表可以单条轮播也可以整页轮播，支持点击事件，展示数据使用v-html渲染，因此你可以传递html字符串，定制个性化元素。 （React版 (opens new window)） TIP 组件内部没有设置deep监听props，数据变更时，请生成新的props，不然组件将无法刷新状态 this.config.data = ['foo', 'foo']是无效的 this.config = { data: ['foo', 'foo'] }才是有效的 点击复制 # 基本轮播表 点击以展示/隐藏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'] ] } # 附带表头 点击以展示/隐藏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'] ] } # 附带行号 点击以展示/隐藏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'] } # 整页滚动 点击以展示/隐藏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' } # 定制元素 点击以展示/隐藏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'] } # config属性 属性 说明 类型 可选值 默认值 header 表头数据 Array --- [] data 表数据 Array --- [] rowNum 表行数 Number --- 5 headerBGC 表头背景色 String --- '#00BAFF' oddRowBGC 奇数行背景色 String --- '#003B51' evenRowBGC 偶数行背景色 String --- #0A2732 waitTime 轮播时间间隔(ms) Number --- 2000 headerHeight 表头高度 Number --- 35 columnWidth 列宽度 Array [1] [] align 列对齐方式 Array [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 --- --- ceil 单元格数据 Array --- [] rowIndex 行索引 Number --- --- columnIndex 列索引 Number --- --- # mouseover事件当鼠标悬浮在某个单元格上时（表头不支持），轮播表将抛出一个mouseover事件，包含被悬浮单元格的相关数据（与click事件数据相同）。 # updateRows方法alpha如果想要不断追加行数据，又不想从头开始轮播，可以使用此方法更新行数据，不会导致从头轮播，也可以设置下次滚动的起始行。 /** * @param {string[][]} rows 更新后的行数据 * @param {number} index 下次滚动的起始行 （可缺省） */ function updateRows(rows, index) { // ... } export default { data () { return () { config: {} } }, methods () { doUpdate () { this.$refs['scrollBoard'].updateRows(rows, index) } } }← 数字翻牌器 排名轮播表 → |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |