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

深碍√TFBOYSˉ_ 2023-10-03 21:45 32阅读 0赞

### 前言 ###

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

### 效果 ###

![在这里插入图片描述][6e96866501034a15921b94b66f2acfe6.png]

### 实现步骤： ###

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 >`下才会生效。

[Vue_DataV]: https://blog.csdn.net/someday____/article/details/128098321?csdn_share_tail=%7B%22type%22:%22blog%22,%22rType%22:%22article%22,%22rId%22:%22128098321%22,%22source%22:%22someday____%22%7D
[6e96866501034a15921b94b66f2acfe6.png]: https://img-blog.csdnimg.cn/6e96866501034a15921b94b66f2acfe6.png