解决Vue基于DataV优化样式滚动表格(dv-scroll-board)轮翻效果数据加载后，js动态添加css样式失败的问题

前言

最近在做vue项目，基于DataV做轮播效果时，遇到数据从后台加载后无法动态添加css样式渲染的问题，然后查询资料后解决了，记录一下。
DataV具体介绍，请前往：Vue大屏可视化DataV组件库

效果

实现步骤：

html加入轮播组件：

<dv-scroll-board :config="config" style="width: 100%" />

js如下：

import { listDataShow } from "@/api/buildscreen/datashow";
export default {
  name: "screen-data-show",
  components: {},
  props: {},
  computed: {},
  watch: {},
  data() {
    return {
      config: {
        header: [],
        data: [],
        // index: true,
        columnWidth: [500, 500],
        align: ["center"],
        rowNum: 6,
        headerBGC: "#1981f6",
        headerHeight: 45,
        oddRowBGC: "transparent",
        evenRowBGC: "transparent",
        //waitTime: 1500, // 轮播时间间隔(ms)
      },
    };
  },
  created() {
     this.getList();  
  },
  mounted() {},
  methods: {
    /** 查询项目列表 */
    getList() {
      this.loading = true;
      listDataShow(this.queryParams).then((response) => {
        let arrList = [];
        for (let rows of response.data) {
          if (rows.color == "red") {
            arrList.push(
              '<div class="roll-item red">' + rows.projectName + "</div>"
            );
          } else if (rows.color == "yellow") {
            arrList.push(
              '<div class="roll-item yellow">' + rows.projectName + "</div>"
            );
          } else if (rows.color == "blue") {
            //把所有蓝色改成绿色
            arrList.push(
              '<div class="roll-item green">' + rows.projectName + "</div>"
            );
          }else{
            arrList.push(
              '<div class="roll-item blue">' + rows.projectName + "</div>"
            );

          }
        }
        if(response.data.length%2!=0){
          arrList.push(
              '<div class="roll-item" style="display:none"></div>'
            );
        }

        let resultList = []; //拆分数组
        for (var i = 0; i < arrList.length; i += 2) {
          resultList.push(arrList.slice(i, i + 2));
        }
        this.config.data = resultList;
        this.config = { ...this.config }; //必不可少，不可省略
      });
    },
  },
};
</script>

注意：因为是js动态加载css,如下图代码所示:

          arrList.push(
              '<div class="roll-item red">ddd</div>'
            );

因此写css时要注意不要写在<style lang="scss" scoped>下,要写在<style >下才会生效。

<style >
.roll-item {
  width: 100%;
  height: 95%;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  border-radius: 3px;
}

.red {
background-color: #f56c6c;
  border: 1px solid #f56c6c;
}
.blue {
  background-color: #518cde;
  border: 1px solid #518cde;
}
.green {
  background-color: #83e63c;
  border: 1px solid #83e63c;
}
.yellow {
  box-shadow: -10px 0px 15px #e6a23c inset,
     0px -10px 15px #e6a23c inset,
     10px 0px 15px #e6a23c inset,
     0px 10px 15px #e6a23c inset;
  border: 1px solid #e6a23c;
}
</style>

<style lang="scss" scoped>
  .header-center-decoration {
    width: 40%;
    height: 60px;
    margin-top: 25px;
    margin-left: -5%;
    position:absolute
  }

#scroll-board {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>