DataV - Vue3

Appearance

轮播表 ​

轮播表

基础用法 ​

查看代码
vue
<template>
  <div demo-bg>
    <dv-scroll-board :config="config" style="width:500px;height:220px" @mouseover="mouseoverHandler" @click="clickHandler" />
  </div>
</template>
<script lang="ts" setup>
const config = reactive({
  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'],
})

const mouseoverHandler = (e: any) => {
  console.log(e)
}

const clickHandler = (e: any) => {
  console.log(e)
}
</script>

往config.data里面push更新数据 ​

使用push更新数据因config watch到更新之后需要重新计算数据，故轮播表会先重置到第一行然后再继续按照刚才的进度轮播，介意的话可以用updateRows更新数据。

查看代码
vue
<template>
  <div w50rem h20rem p5 flex="~ col" justify-center items-center bg-dark>
    <div pt5>
      <dv-scroll-board ref="scrollBoard" :config="config" style="width:500px;height:220px" @mouseover="mouseoverHandler" @click="clickHandler" />
    </div>
    <div py5>
      <button btn @click="updateRows">
        增加数据
      </button>
    </div>
  </div>
</template>
<script lang="ts" setup>
const config = reactive({
  header: ['列1', '列2', '列3'],
  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'],
  ],
  index: true,
  columnWidth: [50],
  align: ['center'],
})

const mouseoverHandler = (e: any) => {
  console.log(e)
}

const clickHandler = (e: any) => {
  console.log(e)
}

const updateRows = () => {
  config.data.push([`行${config.data.length + 1}列1`, `行${config.data.length + 1}列2`, `行${config.data.length + 1}列3`])
}
</script>

利用updateRows更新数据 ​

如果想要不断追加行数据，又不想从出现push出现的问题，可以使用此方法更新行数据，不会导致从头轮播，也可以设置下次滚动的起始行。

updateRows更新数据需要替换掉整个config里的data数据，详情见下方demo代码

查看代码
vue
<template>
  <div w50rem h20rem p5 flex="~ col" justify-center items-center bg-dark>
    <div pt5>
      <dv-scroll-board ref="scrollBoard" :config="config" style="width:500px;height:220px" @mouseover="mouseoverHandler" @click="clickHandler" />
    </div>
    <div py5>
      <button btn @click="updateRows">
        UpdateRows
      </button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { ScrollBoard } from '@kjgl77/datav-vue3/index'
const config = reactive({
  header: ['列1', '列2', '列3'],
  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'],
  ],
  index: true,
  columnWidth: [50],
  align: ['center'],
})

const data2 = [
  ['<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'],
  ['行11列1', '<span style="color:#e7bcf3;">行11列2</span>', '行11列3'],
  ['行12列1', '<span style="color:#e7bcf3;">行12列2</span>', '行12列3'],
]

const mouseoverHandler = (e: any) => {
  console.log(e)
}

const clickHandler = (e: any) => {
  console.log(e)
}

const scrollBoard = ref<InstanceType<typeof ScrollBoard>>(null)

const updateRows = () => {
  if (scrollBoard.value)
    // 此处可以传第二个参数 index，指定下次滚动的起始行
    scrollBoard.value.updateRows(data2)
}
</script>

属性 ​

参数说明类型可选值默认值
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显示行号Booleantrue/falsefalse
indexHeader行号表头String-'#'
carousel轮播方式String'single'/'page''single'
hoverPause悬浮暂停轮播Boolean---true

config相关注释 ​

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

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

事件 ​

事件名说明参数列表
click行或单元格点击事件见下方表
mouseover鼠标移入事件同click
getFirstRow1.4.2轮播表第一条数据见下方表

事件参数说明 ​

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