vue+DataV 易懂使用方式

永远的个初学者

已于 2022-11-18 14:02:50 修改

阅读量413

点赞数

分类专栏：前端大屏大屏 VUE 文章标签： vue.js javascript 前端

于 2022-11-18 14:01:32 首次发布

本文链接：https://blog.csdn.net/weixin_43869524/article/details/127921321

版权

VUE 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

前端大屏

2 篇文章 0 订阅

订阅专栏

大屏

2 篇文章 0 订阅

订阅专栏

DataV 官网

http://datav.jiaminghi.com/
下面拿表格做测试

<template>
  <div class="item">
    <dv-scroll-board
      :config="config"
      style="width: 100%; height: 98%"
      ref="scrollBoard"
    />
  </div>
</template>
<script>
var imgUrl = require("@/assets/image/icon_list_yidj.png");
console.log(imgUrl);
export default {
  data() {
    return {
      config: {},
    };
  },
  components: {},
  mounted() {
    var data = [];
    for (let index = 0; index < 40; index++) {
      data.push([
        `<img src="${imgUrl}">`,
        '<span style="color:#00E5FF;font-size: 14px;">2022-10-08</span>',
        '<span style="color:#00E5FF;font-size: 14px;">行1列2</span>',
        '<span style="color:#00E5FF;font-size: 14px;">行1列25465465677657</span>',
        '<span style="color:#00E5FF;font-size: 14px;">行1列2</span>',
        '<span style="color:#00E5FF;font-size: 14px;">行1列2</span>',
      ]);
    }
    this.config = {
      header: [
        '<span style="color:#fff;font-size: 18px;font-family: Source Han Sans CN;font-weight: 400;">预警等级</span>',
        '<span style="color:#fff;font-size: 18px;font-family: Source Han Sans CN;font-weight: 400;">预警时间</span>',
        '<span style="color:#fff;font-size: 18px;font-family: Source Han Sans CN;font-weight: 400;">预警边坡</span>',
        '<span style="color:#fff;font-size: 18px;font-family: Source Han Sans CN;font-weight: 400;">具体位置</span>',
        '<span style="color:#fff;font-size: 18px;font-family: Source Han Sans CN;font-weight: 400;">预警设备名称</span>',
        '<span style="color:#fff;font-size: 18px;font-family: Source Han Sans CN;font-weight: 400;">预警设备类型</span>',
      ],
      data: data,
      rowNum: 10,
      index: true,
      columnWidth: [50, 110, 150, 130, 300, 260, 140],
      align: ["center"],
      headerBGC: "#0a2f49",
      headerHeight: 40,
      waitTime: 2000, // 轮播时间间隔(ms)
    };
  },
  methods: {
    // doUpdate() {
    //   this.$refs["scrollBoard"].updateRows(rows, index);
    // },
  },
};
</script>
  <style scoped lang="scss">
.item {
  width: 100%;
  height: 100%;
  //   border: 1px solid red;
  position: relative;
}
</style>