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
        :rowNum=12
        :config="configdisplacementofDam"
        style="width:100%;height:100%;"/>

　　

 

数据：

// 大坝位移相关参数
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: {}

　　

 

调用方式：

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

　　

设置css样式：

.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%;
                }
              }
            }
          }
        }

　　

 

展示效果：