使用DataV轮播表时自定义样式

 如果你的空间比较局限，不自定义样式是这样的，可能会展示不全

直接上代码吧。。。 

 1.首先安装dataV

npm install @jiaminghi/data-view

 2.在main.js里注册，也可以去官网找按需引入

import dataV from "@jiaminghi/data-view";
Vue.use(dataV);

 3.使用

<dv-scroll-board
      :config="config"
      ref="scrollBoard"
      style="width: 100%; height: 98%"
      @click="skipto"
/>

config: {
        rowNum: 4,//显示行数
        header: ["报警时间", "联网单位", "设备名称", "操作"],//表头
        headerBGC: "#1a264a",//表头背景色
        oddRowBGC: "#18222e",//奇数行背景色
        evenRowBGC: "#18222e",//偶数行背景色
        data: [],//存放数据
},

 data.list.forEach((item, index) => {
          if (index % 2 == 0) {
            this.config.data.push([
              `<div style="color:red;line-height:14px;text-align: center;margin-top:5px">${item.reportTime.slice(
                0,
                11
              )}<br/>${item.reportTime.slice(11)}</div>`,
              // item.reportTime,
              item.orgName,
              item.deviceName,
              `<span style="cursor: pointer;">查看</span>`,
            ]);
          } else {
            this.config.data.push([
              `<div style="color:orange;line-height:14px;text-align: center;margin-top:5px">${item.reportTime.slice(
                0,
                11
              )}<br/>${item.reportTime.slice(11)}</div>`,
              // item.reportTime,
              item.orgName,
              item.deviceName,
              `<span style="cursor: pointer;">查看</span>`,
            ]);
          }
        });

 最最最重要！！！必须有这行，要不然你的轮播表不动

this.$refs["scrollBoard"].updateRows(this.config.data);

展示

如果需要点击事件 ，则需要精准的找到你定义的那段

 skipto(config) {
      if (config.ceil == `<span style="cursor: pointer;">查看</span>`) {
        this.$router.push({
          path: "monitoring/fire",
          query: {
            id: this.alarmList[config.rowIndex].alarmId,
            deviceId: this.alarmList[config.rowIndex].deviceId,
          },
        });
      }
    },