Q-Board 轮播表

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

提示

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

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

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

参考 dataV-轮播表 (opens new window)

<QBoard :config="config" :data="data" style="width:400px;height:200px;" @getRowData="getRowData"></QBoard>

基本示例

<template>
  <div style="background: black;height: 300px" class="flex-center-cus">
    <QBoard :config="config" :data="data" style="width:400px;height:200px;" @getRowData="getRowData"></QBoard>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          header: ['列1', '列2', '列3'],
          index: true,
          align: ['center'],
          columnWidth: [50],
        },
        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']
        ]
      }
    },
    methods: {
      getRowData(event) {
        console.log("event==>", event)
      }
    }
  }
</script>
<style>

</style>

Expand Copy Copy

进阶示例

<template>
  <div style="background: black;height: 300px" class="flex-center-cus">
    <QBoard :config="config" :data="data" style="width:400px;height:200px;" @getRowData="getRowData"></QBoard>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          header: ['列1', '列2', '列3'],
          index: true,
          align: ['center'],
          columnWidth: [50],
          carousel: 'page'
        },
        data: [
          ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
          ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],
          ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],
          ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],
          ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],
          ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],
          ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],
          ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],
          ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],
          ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3']
        ],
      }
    },
    methods: {
      getRowData(event) {
        console.log("event==>", event)
      }
    }
  }
</script>
<style>

</style>

Expand Copy Copy

Attributes

config 属性

属性名	说明	类型	可选值	默认值
data(对应:data)	表数据	Array<Array>	—	[]
header	表头数据	Array<String>	—	[]
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>	'left'/'center' /'right'	[]
index	显示行号	Boolean	—	false
indexHeader	行号表头	String	—	'#'
carousel	轮播方式	String	'single'/'page'	'single'
hoverPause	悬浮暂停轮播	Boolean	—	true

config 注释

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

提示

columnWidth与align允许尾部缺省：

// 三列轮播表
columnWidth: [50]
// 剩下两列宽度将自动计算

Event

click事件

当单元格被点击时（表头不支持），轮播表将抛出一个click事件，getRowData。

click事件数据属性

属性名	说明	类型	可选值	默认值
row	所在行数据	Array<String>	—	[]
ceil	单元格数据	Array<Array>	—	—
rowIndex	行索引	Number	—	—
columnIndex	列索引	Number	—	—