项目场景：

公司用Vue做前端项目，要做一个数据看板，其中有个模块是个数据轮播展示的，研究了一下，dataV中的个轮播表，可以达到这个效果。但使用dataV制作轮播表。

问题描述

轮播表dv-scroll-board的数据来自axios调用后台数据，成功从后台获取数据，但轮播表的数据没有更新。

相关代码：

<template>
  <div>
    <dv-scroll-board :config="config" />
  </div>
</template>

<script>
export default {
    name: 'index',
    data () {
      return {
        ids:[],
        config: {
          header:['xxx','xxx'],
          data: [],
          index: true,
          columnWidth: [30, 160],
          align: ['center','center','center'],
          oddRowBGC: 'rgba(12,48,65,0.4)',
          evenRowBGC: 'rgba(10, 32, 50, 0.3)',
          headerBGC:'rgba(0,186,255,0.4)',
          carousel:'page'
        }
      }
    },
 created() {
    //  初始化数据
     this.initData()

    },
 methods:{
    async initData(){
        const params = {xxxx: 'xxx'}
        //调接口
        const response = await warningList(params)
        this.ids = response.data.ids
        this.config.data = response.data.list
      }
  }
}
</script>

原因分析：

无

解决方案：

解决方法有二种：

1、使用updateRows方法更新config中的data数据；

2、this.config={...this.config} 重新生成一个新对象

解决方法有二种。

方法一

在调用接口获取到数据后，可以通过调用 updateRows方法更新config数据。

<template>
  <div>
    <dv-scroll-board ref="scrollBoard" :config="config" />
  </div>
</template>

<script>
export default {
    ……
 methods:{
    async initData(){
        ……
        //更新config.data数据
        this.config.data = response.data.list
//使用下面方式更新轮播表的config中的data数据
        this.$refs['scrollBoard'].updateRows(this.config.data)
      }
  }
}
</script>

方法二

也可以使用this.config={...this.config} 重新生成一个新对象。

<template>
  <div>
    <dv-scroll-board ref="scrollBoard" :config="config" />
  </div>
</template>

<script>
export default {
    ……
 methods:{
    async initData(){
        ……
        this.config.data = response.data.list
        //重新生成一个新的对象，进行赋值
        this.config={...this.config}
      }
  }
}
</script>