Vue使用DataV轮播表，通过Axios请求数据后，轮播表数据没有及时更新。

一、研究背景

在做一个Vue2+ECharts可视化项目过程中，要实现一个轮播表，没有找到ECharts现成图表组件。打算使用vue-seamless-scroll来实现，但其自定义表头与内容的列宽不好控制，发现DataV刚好有这个轮播表组件。然而通过Axios请求数据后，再将数据传递轮播表组件，轮播表数据没有及时更新，使用watch监听也不管起作用，暂时不知道原因。

// 父组件
<template>
  <div class="dashboard-container">
      <ScrollTable :options="product" />
  </div>
</template>
<script>
import ScrollTable from "./admin/components/ScrollTable.vue"
import productService from "@/services/product";

export default {
  name: 'Dashboard',
  components: {
    ScrollTable,
  },
  data() {
    return {
      product: {
        header: ['名称', '公司', '添加时间'],
        data: [],
      }
    }
  },
  mounted() {
    this.getProductOptions();
  },
  methods: {
    async getProductOptions() {
      const res = await productService.getProductsByDeptId();
      const arr = res?.data || []
      this.product.data = arr.map(v => {
        return [
          v['name'],
          v['companyName'],
          v['createTime'],
        ]
      })
    },
  },
}
</script>

// 子组件轮播表
<template>
    <div class="container"><dv-scroll-board :config="config" class="scroll-board" /></div>
</template>
<script>
export default {
    name: 'scroll-table',
    props: {
        options: {
            type: Object,
            default: () => ({
                header: ['列1', '列2', '列3', '列4'], // 表头数组，每个元素代表一列的标题
                data: [ // 数据数组，每个元素代表一行数据，每个元素是一个数组，每个元素代表一列数据
                    ['行1列1', '行1列2', '行1列3', '行1列4'], // 行1的数据，每个元素代表一列数据，与表头数组顺序对应
                ]
            })
        }
    },
    data() {
        return {
            config: {
                header: [],
                data: [],
                index: true,
                columnWidth: [50],
                align: ['center', 'center', 'center', 'center'],
                indexHeader: '序号',
                headerBGC: '#f7fbff',
                oddRowBGC: '#fff',
                evenRowBGC: '#fff',
                waitTime: 3000,
            }
        }
    },
    watch: {
        'options': {
            handler(newData) {
                this.config.header = newData.header
                this.config.data = newData.data
                console.log('config:', this.newData)
            },
            immediate: true,
        },
    }
}
</script>
<style scoped lang="scss">
.container {
    width: 100%;
    height: 220px !important;
    overflow: hidden;
}
.scroll-board {
    color: #999;
    font-size: 14px;
}
::v-deep .header-item {
    color: #626966 !important;
}
</style>

二、解决方法

解决这个问题有以下两个方法：

1. 使用ref调用updateRows方法

2.给config重新赋值

在DataV文档里面，找到了一个解决办法，可以调用updateRows方法更新数据，详细使用情况可自行查阅DataV文档。

给在父组件调用的子组件设置ref=“scrollTable1”，通过this.$refs['scrollTable2'].$refs['scrollBoard'].updateRows(this.product.data)实现数据更新。可轮播表数据还是不更新，最后直接在父组件使用dv-scroll-board轮播表才实现数据更新。修改后的源代码如下：

// 父组件
<template>
  <div class="dashboard-container">
        <div class="chart-wrapper">
          <dv-scroll-board ref="scrollTable2" :config="product" class="scroll-board" />
        </div>
  </div>
</template>

<script>
import productService from "@/services/product";

export default {
  name: 'Dashboard',
  data() {
    const scrollBoardConfig = {
      header: [],
      data: [],
      index: true,
      columnWidth: [50],
      align: ['center', 'center', 'center', 'center'],
      indexHeader: '#',
      headerBGC: '#f7fbff',
      oddRowBGC: '#fff',
      evenRowBGC: '#fff',
      waitTime: 3000,
    }
    return {
      product: {
        ...scrollBoardConfig,
        header: ['名称', '公司', '添加时间'],
        data: [],
      }
    }
  },
  mounted() {
    this.getProductOptions();
  },
  methods: {
    async getProductOptions() {
      const { data=[] } = await productService.getProductsByDeptId();
      this.product.data = data.map(v => {
        return [
          v['name'],
          v['companyName'],
          v['createTime'],
        ]
      })
      // this.product={ ...this.product }  
      this.$nextTick(() => {
        this.$refs['scrollTable2'].updateRows(this.product.data);
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 10px;
    height: 220px !important;
    overflow: hidden;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    margin-bottom: 8px;
  }
}

.scroll-board {
  color: #999;
  font-size: 14px;
}

::v-deep .header-item {
  color: #626966 !important;
}
</style>

三、参考文献

轮播表 | DataV (jiaminghi.com)

http://t.csdnimg.cn/rlwcF