今天写个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'] ] }
}
最终效果: