解决vue轮翻效果数据加载后，页面无渲染效果问题

最近在做vue项目，做轮翻效果时，遇到数据从后台加载后无法渲染的问题，然后查询资料后解决了，记录一下，就当学习了。

1. 首先介绍一下基础知识：用DataV插件，做轮翻效果，代码非常简单，在页面中直接引用标签，直接在data里面写数据就就行了；
2. 先安装DataV

npm install @jiaminghi/data-view

3. 在main.js里面全局注册DataV

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

4. 创建vue组件,使用dv-scroll-board标签

<template>
    <div class="public-header" style="">
      <img
        style=""
        src="../../assets/img/title-icon.png"
        alt=""
      />
      <div> 项目情况</div>
    </div>
    <dv-scroll-board :config="config" style="width:92%;height:200px;margin: 10px auto 0"/>
  </div>
</template>

<script>
  import {downFile, getAction, httpAction, postAction} from "@api/manage";
  import {getPersenalProject} from '@/api/api'
  import {USER_INFO} from '@/store/mutation-types'
  import Vue from "vue";
  const user = Vue.ls.get(USER_INFO)
  
  const url = {
    //加载项目情况
    getProjectInfo: "/esdrs/project/getProjectInfo",
  };

  export default {
    name: "right-box",
    components: {},
    data() {
      return {
        config: {
          header: ['序号', '图纸名称', '办理状态', '项目状态'],
          data: [
            // ['1', '正常', '已分配', 'XZD2020123100', '...'],
            // ['2', '异常', '已分配', 'XZD2020123100', '...'],
            // ['3', '正常', '已分配', 'XZD2020123100', '...'],
            // ['4', '正常', '已分配', 'XZD2020123100', '...'],
            // ['5', '正常', '已分配', 'XZD2020123100', '...'],
            // ['6', '异常', '已分配', 'XZD2020123100', '...'],
            // ['7', '正常', '已分配', 'XZD2020123100', '...'],
            // ['8', '正常', '已分配', 'XZD2020123100', '...'],
            ],
          align: ['center', 'center', 'center'],
          oddRowBGC: 'transparent',
          evenRowBGC: 'transparent',
          color: 'red',
          headerBGC: '#F1F4FA',
          rowNum: 5,
          columnWidth: [60],
        }
      }
    },
    watch: {},
    methods: {
      //加载项目情况
      async loadProjectInfoData() {
        let param = {
          startTime: startTime,
          endTime: endTime
        };
        await getAction(url.getProjectInfo, param).then(res => {
          if (res.success) {
            // console.log("加载项目信息");
            let projectList = res.result.records || res.result;
            if (projectList != null) {
              let arrList = [];
              for (let i = 0; i < projectList.length; i++) {
                let arr = [];
                arr.push(i + 1 + '');
                arr.push(projectList[i]['projectName']);
                let alarmType = projectList[i]['alarmType'];
                arrList.push(arr);
              }
              this.config.data = arrList;
              this.config = {...this.config};//必不可少，不可省略
            }
          } else {
            // console.dir(res);
          }
        })
      },
    mounted() {
      this.loadProjectInfoData();
    },
    created() {
  }
</script>

其中，config中data数据即为轮翻数据，align：表示显示位置，rowNum：表示轮翻显示的条数；

5. 当调用后台数据后，数据加载到了，发现界面没渲染上效果，查了资料说，加载数据后要加上这句，
   this.config = {…this.config};//！！！必不可少，不可省略，相当于是把数据重新渲染到页面。果然加上这句话可以把数据渲染上了。
   同时，因为访问后台用的axios异步访问，可能是数据还没加载完，就加载页面信息，导致后台请求的数据没渲染到界面上，为了保险起见，将访问后台方法loadProjectInfoData添加async ，将axios访问方法添加await，设置为同步加载，确保加载页面之前，先将数据加载过来。
6. 显示效果