UI组件 DataV | 轮播图

ps：实习两个月了，忽然觉得自己在原地踏步，该做点什么改变了，那就从第一篇的dome开始吧！

前两天在做数据可视化的项目中的时候遇到一个轮播表，本来自己写了一个但是师傅说要自动滚动，推荐的用DataV上面的组件。

需求：一个表格内容自动滚动的轮播表

1. DataV的使用步骤：

• 使用DataV第一步：阅读注意用前必看！！！

ps：这一步很重要！！！ （我就没有仔细阅读导致后面出现问题）

• 第二步安装

cd datav-project  //进入目录

npm add @jiaminghi/data-view  //通过npm或者yarn安装，二选一即可
yarn add @jiaminghi/data-view

• 第三步注册

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

Vue.use(dataV)

-第四步按需引入

import { borderBox1 } from '@jiaminghi/data-view'

Vue.use(borderBox1)

然后就可以在该组件内使用你需要的模块了

2. 实际运用

首先确定要使用的组件模型：

template中使用标签：

<div class="body">
  <dv-scroll-board :config="config" style="width: 362px; margin: 16px 8px 0 8px;" />
</div>

在data中初始化

data(){
  return{
    config:{
      header: ['单位工程名称', '任务名称', '位置编码'],
      data:[],
    }
  }
}

在methods中通过axios请求接口数据，并赋值

method：{
  render(){
    axios.post("url",{parmas}).then(({data}) => {
        this.$nextTick(() =>{
          data.warningDTOList.forEach(item => {
            const arr = [];
            if(item.parentProjectName != null){
              arr.push(item.parentProjectName,item.wbsName,item.wbsFullNo)
              this.config.data.push(arr)
              this.config ={ ...this.config}  //这一步很重要，前面没有注意看文档，导致一直找不到数据没有渲染的原因，
            }
          })
        })
    }) //将接口返回的数据处理后赋值给this.config.data,注意返回数据的格式
  }
}

在mounted中调用

mounted(){
  this.render();
}

最后调整样式：

data(){
  return{
    config:{
      header: ['单位工程名称', '任务名称', '位置编码'],
      data:[],
      headerBGC:'rgba(221, 234, 255, 0.16)', //表头背景色
      oddRowBGC:'rgba(221, 234, 255, .2)', //奇数行背景色
      evenRowBGC:'rgba(221, 234, 255, .06)', //偶数行背景色
      headerHeight:'38'  //行高
    }
  }
}

最终效果：