datav-实现轮播表，使用updateRows方法-无缝衔接加载数据

前言

最近在做大屏需求的时候，遇到一个轮播数据的需求，查看datav文档发现确实有这个组件
但这个组件只提供了一次加载轮播的例子，虽然提供了轮播加载数据updateRows方法
但是文档并没有触发事件，比如轮播完数据触发事件，加载完数据事件-这些都没有说明
关键时我们要解决谁来判断数据轮播完了，来触发这个事件，请求接口，加载第二页数据

视频

datav-轮播表无缝衔接数据

须知

1.为什么要边滚动边加载数据

直接把后端所有数据请求之后直接轮播-确实比较省事。但是这样做法不符合
先不说浏览器受不受得了，就一个真实设备报警可能就有7，8条，数据会越来越多
作为一个合理cv工程师，我们还是要避免这种事，不到万不得已还是不要这样干

2.直接往config.data里面push数据不就行了-不合理

如果我们直接往config.data里面push数据，数据确实进去了，但是轮播表的数据没有更新
轮播的还是原来的数据，如果我们把config.data重新赋值一遍，轮播数据确实改变了
但他有从头开始轮播，没有无缝衔接。并且是我们手动按钮触发，不符合需求，不建议

3.使用定时器计算时间加载数据-推荐

本来想在网上找一下有没有轮播完的事件直接用，找了一圈一言难尽，自己写了一个
注意一：我们不能直接写定时器来写代码逻辑，因为修改定时器间隔后，定时器不会变
注意二：因为默认就显示了五个，所以有两种情况，第一次，第二次....代码有注释
注意三：因为我们是用定时器来判断加载数据，所以要把鼠标悬停停止播放关掉

代码实现-子父组件形式-可复制-看注释

父组件

<template><div class="app-container"><el-card class="box-card"><div class="cont-top"><div class="con-title">测试<el-button @click="doUpdate" type="success" size="mini">替换数据滚动列表是否更新数据测试</el-button></div></div><div class="cont-bottom"><DatavTable ref="DatavTable" /></div></el-card></div>
</template>

<script>
// datav-轮播表
import DatavTable from './components/DatavTable.vue'
export default {name: 'Purejs',components: {DatavTable},methods: {// datav-轮播表添加数据doUpdate () {this.$refs.DatavTable.ceshi()}}
}
</script>

<style lang="scss" scoped>
.app-container {::v-deep .box-card {width: 32%;height: 328px;margin: 0 2% 1% 0;&:nth-child(3n) {margin-right: 0;}
.el-card__body {height: 100%;padding: 0;display: flex;flex-direction: column;// align-items: center;.cont-top {height: 50px;.con-title {line-height: 50px;padding-left: 10px;font-size: 16px;// font-family: PingFang SC-Bold, PingFang SC;font-weight: 700;border-bottom: 1px solid #f4f4f4;}}.cont-bottom {flex: 1;padding: 10px;}.PieDevicetype {background: rgba(2, 29, 159, 0.7);}}}
}
</style>

子组件-DatavTable.vue

<template><div id="DatavTable"><dv-scroll-board:config="config"ref="scrollBoard"style="width:100%;height:100%"/></div>
</template>

<script>
export default {name: 'DatavTable',data () {return {// 配置config: {// 标头header: ['列1', '列2', '列3'],// 数据data: [],// 是否开启序号index: true,// 宽度-按照顺序-不写就是平均分配columnWidth: [50],// 居中方式align: ['center', 'center', 'center', 'center'],// 滚动时间-每条waitTime: 3500,// 序号别名indexHeader: '排名'},// 定时器加载数据time: null,// datav数据刷新间隔datavNumber: 5,// datav下标datavIndex: 15,// 追加数据addlist: []，// 禁止鼠标悬浮暂停hoverPause: false}},created () {// 模拟调接口-等待data-html加载完毕-不然取不到数据会报错this.$nextTick(() => {this.doUpdate()})},methods: {// 测试方法-测试直接往config.data添加数据时，轮播表数据是否会刷新ceshi () {this.config.data.push(['行', '行1', '行1列3'],['行', '行2', '行2列3'],['行', '行3', '行3列3'],['行', '行4', '行4列3'],['行', '行5', '行5列3'],['行', '行6', '行6列3'],['行', '行7', '行7列3'],['行', '行8', '行8列3'],['行', '行9', '行9列3'],['行', '行1', '行10列3'])// 解决办法-1// 重新new一个对象-轮播数据确实更新了，// 缺点-没有衔接滚动，又从1开始滚动// this.config = { ...this.config }console.log('this.config.data', this.config.data)},doUpdate () {if (this.addlist.length < 10) {console.log('第一次')// 调用第一次接口赋值数据-模拟this.config.data = [['行1列1', '行1列2', '行1列3'],['行2列1', '行2列2', '行2列3'],['行3列1', '行3列2', '行3列3'],['行4列1', '行4列2', '行4列3'],['行5列1', '行5列2', '行5列3'],['行6列1', '行6列2', '行6列3'],['行7列1', '行7列2', '行7列3'],['行8列1', '行8列2', '行8列3'],['行9列1', '行9列2', '行9列3'],['行10列1', '行10列2', '行10列3']]// 记录数据-this.addlist = [['行1列1', '行1列2', '行1列3'],['行2列1', '行2列2', '行2列3'],['行3列1', '行3列2', '行3列3'],['行4列1', '行4列2', '行4列3'],['行5列1', '行5列2', '行5列3'],['行6列1', '行6列2', '行6列3'],['行7列1', '行7列2', '行7列3'],['行8列1', '行8列2', '行8列3'],['行9列1', '行9列2', '行9列3'],['行10列1', '行10列2', '行10列3']]}//   开始判断加载数据console.log('this.config.data.length', this.config.data.length)console.log('this.config.data', this.config.data)console.log('this.addlist', this.addlist.length)
// 第二次加载if (this.addlist.length > 10) {console.log('第二次执行')// 刷新时间10次this.datavNumber = 10}
// 先清空-在触发// 不这样写，修改时间间隔后，定时器时间间隔不会修改clearInterval(this.time)this.time = setInterval(this.datavloaddata, 3500 * this.datavNumber)},// datav-添加数据方法datavloaddata () {// 页码加一console.log('执行调接口-第二次')let a = [['行', '行1', '行1列3'],['行', '行2', '行2列3'],['行', '行3', '行3列3'],['行', '行4', '行4列3'],['行', '行5', '行5列3'],['行', '行6', '行6列3'],['行', '行7', '行7列3'],['行', '行8', '行8列3'],['行', '行9', '行9列3'],['行', '行1', '行10列3']]// 模拟调接口赋值数据-res.data - 轮播数据this.addlist = [...this.addlist, ...a]
// 数据保存一份-没有什么作用// this.config.data = this.addlist
// 开始轮播数据下标-建议传// 不传也可以-不会影响太大// 传的话就是添加数据开始每次数据长度-15 因为一屏可以显示5个，// 或者是第一次是5 每次加10 - 比较麻烦let c = this.addlist.length - this.datavIndexconsole.log('this.addlist.length', this.addlist.length)console.log('this.datavIndex', this.datavIndex)console.log('c', c)
// 解决方法二-使用updateRows（）方法追加数据// 优点-无限追加数据-无缝衔接// 缺点-不能直接使用，需要代码触发（比如定时器）这个方法相当于一个缓存，并不会直接把数据更新到config里面// 就更element-table表格选中道理一样，必须先渲染数据表格，才能通过方法选中（直接写死是选中不了-可能没有标记）// this.$refs['scrollBoard'].updateRows(this.addlist,c)this.$refs['scrollBoard'].updateRows(this.addlist)
// 配置数据-上面赋值了就会变，不赋值是不会变（因为updateRows（）方法-不会修改config里面数据）console.log('this.config.data', this.config.data)// 执行下一次this.doUpdate()}},beforeDestroy () {// 在页面销毁后，清除计时器clearInterval(this.time)}
}
</script>

<style lang="scss" scoped>
#DatavTable {width: 100%;height: 100%;
}
</style>

总结：

经过这一趟流程下来相信你也对 datav-实现轮播表，使用updateRows方法-无缝衔接加载数据有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！