DataV自动滚动表格

<template>
  <div class="">
      <dv-scroll-board :config="config" style="width:100%;height:270px;" />
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {
  },
  data() {
    return {
      tableData: [
        { riverName: '内蒙古河段', unfreeze: '465', freeze: '165', freezeChange: '-27' },
        { riverName: '宁夏河段', unfreeze: '259', freeze: '', freezeChange: '' },
        { riverName: '天桥库区', unfreeze: '24.69', freeze: '', freezeChange: '' },
        { riverName: '壶口瀑布段', unfreeze: '72', freeze: '', freezeChange: '' },
        { riverName: '黄河累计', unfreeze: '820.69', freeze: '165.0', freezeChange: '-27.0' },
      ],
      config: {
        header: ['河段', '开河(km)', '封冻长度(km)', '较昨日变化(km)'],
        align: ['center', 'center', 'center'],
        data: [],
      },
      // 表格高度
      creatDate: ''
    }
  },
  created() {
   //转换表格需要的数据类型
    let arrlistresult = []
    this.tableData.map(item => {
      let arrlist = [item.riverName, item.unfreeze, item.freeze, item.freezeChange]
      arrlistresult.push(arrlist)
    })
    console.log('dataV-', arrlistresult);
    this.config = {
      header: ['河段', '开河(km)', '封冻长度(km)', '较昨日变化(km)'],
      rowNum: 4, // 表行数
      waitTime: 2000, // 轮播时间间隔(ms)
      align: ['center', 'center', 'center'],
      data: arrlistresult
    }
  },
  methods: {
  }
}
</script>

<style scoped lang="less">
/deep/ .dv-scroll-board .header {
  font-size: 18px;
}
/deep/.dv-scroll-board .rows .row-item {
  font-size: 16px;
}
</style>