datav轮播表使用事例

官方事例地址:

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

 

安装:

1
npm install @jiaminghi/data-view

  

 

局部引入:

1
2
import Vue from 'vue'
import { scrollBoard } from '@jiaminghi/data-view'

  

 

事例dom:

1
2
3
4
<dv-scroll-board
        :rowNum=12
        :config="configdisplacementofDam"
        style="width:100%;height:100%;"/>

  

 

数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 大坝位移相关参数
headerdisplacementofDam: ['监测点', '横偏(X)', '纵偏(Y)', '横偏(X)', '纵偏(Y)'],
datadisplacementofDam: [
  ['<span class="span-rw">石马1</span>', '6.36', '6.36', '6.36', '6.36'],
  ['石马2', '6.36', '6.36', '6.36', '6.36'],
  ['石马3', '<span>6.36<i class="icon icon-shang"></i></span>', '6.36', '6.36', '6.36'],
  ['石马4', '6.36', '6.36', '6.36', '6.36'],
  ['石马5', '6.36', '6.36', '6.36', '6.36'],
  ['石马6', '6.36', '6.36', '6.36', '6.36'],
  ['石马7', '6.36', '6.36', '6.36', '6.36'],
  ['石马8', '6.36', '6.36', '6.36', '6.36'],
  ['石马9', '6.36', '6.36', '6.36', '6.36'],
  ['石马10', '6.36', '6.36', '6.36', '6.36'],
  ['石马11', '6.36', '6.36', '6.36', '6.36'],
  ['石马12', '6.36', '6.36', '6.36', '6.36']
],
configdisplacementofDam: {}

  

 

调用方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
// 生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
  this.configdisplacementofDam = {
    data: this.datadisplacementofDam, // 表数据
    header: this.headerdisplacementofDam, // 表头数据
    rowNum: 6, // 表行数
    headerBGC: '#fff', // 表头背景色
    oddRowBGC: '#fff', // 奇数行背景色
    evenRowBGC: '#fff', // 偶数行背景色
    waitTime: 2000, // 轮播时间间隔(ms)
    align: 'center'
  }
},

  

设置css样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.l-content {
          .dv-scroll-board{
            color:#3c3f52;
            .header{
              font-size: 1em;
              color: #91a0b9;
              text-align: center;
              white-space: nowrap;
            }
            .rows{
              .row-item{
                text-align: center;
 
                .ceil{
                  color:#3c3f52;
                  font-size: 1em;
                  i{
                    font-size: 0.5em;
                    color: #3bc080;
                    /*position: relative;
                    left: 5px;
                    top:10px;*/
                  }
                }
                .ceil:nth-child(1){
                  color: #7cb9ff;
                  font-size: 1.1em;
                  width: 25%;
                }
              }
            }
          }
        }

  

 

展示效果:

 

 

 

posted @   庞某人  阅读(13482)  评论(10编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示