Vue+dataV：轮播表，调用后台数据，数据没有更新

您所在的位置：网站首页 › vue使用mock做数据表 › Vue+dataV：轮播表，调用后台数据，数据没有更新

Vue+dataV：轮播表，调用后台数据，数据没有更新

2024-06-20 01:52| 来源: 网络整理| 查看: 265

项目场景：

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

问题描述

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

相关代码：

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 } } } 原因分析：

无

解决方案：

解决方法有二种：

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

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

解决方法有二种。

方法一

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

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

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

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

【本文地址】

Vue+dataV：轮播表，调用后台数据，数据没有更新

Vue+dataV：轮播表，调用后台数据，数据没有更新

今日新闻

推荐新闻