vue 表格自动轮播

最新推荐文章于 2024-01-05 14:05:41 发布

原创最新推荐文章于 2024-01-05 14:05:41 发布 · 2.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

今天写个tab表格自动轮播，写js费劲，找了个组件datav轮播表

官方事例地址：

http://datav.jiaminghi.com/guide/scrollBoard.html

安装：npm install @jiaminghi/data-view

局部引入：

import Vue from 'vue'

import { scrollBoard } from '@jiaminghi/data-view'

事例dom：

<dv-scroll-board :config="config" style="width:100%;height:100%;font-size: 20px;" @click="downloadAudioFrequency"/>

data() {

return {

config: {},

}

created() {
  this.config = {
      header: ['时间', '通信方式', '通话音频'],
      headerBGC: 'midnightblue', // 表头背景色
      oddRowBGC: 'transparent', // 奇数行背景色
      evenRowBGC: 'transparent', // 偶数行背景色
      waitTime: 3000, // 滚动间隔时间
      index: true, // 是否显示序号
      indexHeader: '序号', // 序号表头
      carousel: 'page', // 轮播'single'|'page'
      hoverPause: true, // 鼠标悬浮是否暂停滚动
      columnWidth: [60, 200, 120, 120], // 列宽
      align: ['center', 'center', 'center', 'center'], // 列对齐方式
      data: [
        ['2022-10-25 10:12:35', '终端→总台', '音频1', '<span style="dispaly:none">1</span>'],
        ['2022-10-25 10:15:35', '终端→终端', '音频2', '1'],
        ['2022-10-25 10:17:35', '总台→终端', '音频3', '1'],
        ['2022-10-25 10:32:35', '终端→总台', '音频4', '1'],
        ['2022-10-25 10:32:35', '终端→终端', '音频5', '1'],
        ['2022-10-25 10:42:35', '终端→终端', '音频6', '1'],
        ['2022-10-25 10:42:35', '终端→总台', '音频7', '1'],
        ['2022-10-25 10:52:35', '终端→总台', '音频8', '1'],
        ['2022-10-25 11:12:35', '终端→终端', '音频9', '1'],
        ['2022-10-25 12:12:35', '终端→总台', '音频10', '1'],
        ['2022-10-25 13:12:35', '终端→总台', '音频11', '1'],
        ['2022-10-25 13:13:35', '终端→终端', '音频12', '1'],
        ['2022-10-25 14:14:35', '终端→总台', '音频13', '1'],
        ['2022-10-25 14:22:35', '总台→终端', '音频14', '1'],
        ['2022-10-25 15:32:35', '终端→总台', '音频15', '1'],
        ['2022-10-25 15:42:35', '终端→总台', '音频16', '1'],
        ['2022-10-25 16:23:35', '总台→终端', '音频17', '1'],
        ['2022-10-25 18:42:35', '终端→总台', '音频18', '1'],
        ['2022-10-25 20:17:35', '总台→终端', '音频19', '1'],
        ['2022-10-25 22:16:35', '终端→总台', '音频20', '1']
      ]
    }

}

最终效果：