第二十篇分享在VUE中使用data-view实现数据滚动显示并可点击

前言：在大屏项目中需要滚动展示某个列表信息，并且能够悬浮鼠标停止滚动、可点击最后一列查看详情、鼠标移走后又正常的滚动和动态能更新新数据。

效果图：

使用方法也很简单，下面直接看下用法吧~~~

1. npm 安装 data-view

npm i @jiaminghi/data-view -S

2. 在 main.js 文件中全局注册 data-view

// 数据滚动
import datav from '@jiaminghi/data-view'
Vue.use(datav)

3. 数据更新操作

    updateData() {setTimeout(() => {const updateData = ['组件12','fiex-12','<span class="colorRed">-75%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>']this.config.data.push(updateData)this.$refs['dvscrollbar'].updateRows(this.config.data)}, 4000)}

4.完整的 demo如下（用法比较简单）

<template><div class="scroll-view-block"><dv-scroll-boardref="dvscrollbar":config="config"style="width: 50rem; height: 30rem;"@click="detailInfo"></dv-scroll-board></div>
</template><script>
export default {data() {return {config: {header: ['组件', '分支', '覆盖率', '详情'],rowNum: 10, // 表格函行数headerHeight: 50, // 表头高度// headerBGC: '#fff', // 表头背景// oddRowBGC: '#fff', // 奇数行背景色// evenRowBGC: '#fff', // 偶数行背景色indexHeader: '序号', // 第一行索引表头名index: true,carousel: 'single',align: ['center'],data: [['组件1','fiex-01','<span class="colorGrass">75.3%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>'],['组件2','fiex-02','<span class="colorGrass">0.00%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>'],['组件3','fiex-03','<span class="colorGrass">100.00%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>'],['组件4','fiex-04','<span class="colorGrass">75.34%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>'],['组件5','fiex-05','<span class="colorGrass">12%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>'],['组件6','fiex-06','<span class="colorGrass">23.2%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>'],['组件7','fiex-07','<span class="colorRed">0.00%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>'],['组件8','fiex-08','<span class="colorRed">-75%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>'],['组件9','fiex-09','<span class="colorGrass">75%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>'],['组件10','fiex-10','<span class="colorRed">-12%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>'],['组件11','fiex-11','<span class="colorRed">-75%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>']]}}},mounted() {this.updateData()},methods: {detailInfo(data) {console.log('data', data)this.$message.success('查看详情成功，可在控制台查看打印的数据')},updateData() {setTimeout(() => {const updateData = ['组件12','fiex-12','<span class="colorRed">-75%</span>','<span class="point-class" style="color: #08C887;"><i class="el-icon-view"></i></sapn>']this.config.data.push(updateData)this.$refs['dvscrollbar'].updateRows(this.config.data)}, 4000)}}
}
</script><style lang="scss" scoped>
::v-deep.scroll-view-block {.colorGrass {color: #33cea0;}.colorRed {color: #ff5722;}.point-class {:hover {font-size: 18px;cursor: pointer;color: #ff5722;}}
}
</style>

希望能帮助到您，感谢支持

第二十篇分享在VUE中使用data-view实现数据滚动显示并可点击相关推荐

Vue中使用moment将时间戳数据格式化显示(el-table中)
场景在使用el-table显示数据时,请求后台数据获取的时间格式是时间戳格式然后前端使用el-table进行显示数据 <el-table v-loading="loading&qu ...
code第一部分数组：第二十二题偶数次中查找单独出现一次的数
code第一部分数组:第二十二题偶数次中查找单独出现一次的数 Given an array of integers, every element appears twice except for o ...
C语言编程＞第二十周 ② 下列给定程序中，函数fun的功能是：求出数组中最大数和次最大数，并把最大数和b[0]中的数对调、次最大数和b[1]中的数对调。
例题:下列给定程序中,函数fun的功能是:求出数组中最大数和次最大数,并把最大数和b[0]中的数对调.次最大数和b[1]中的数对调. 注意:不要改动main函数,不能增行或删行,也不能更改程序的结构. ...
C语言编程＞第二十五周 ① 给定程序中，函数fun的功能是：在形参s所指字符串中的每个非数字字符之后插入一个“*”号。
例题:给定程序中,函数fun的功能是:在形参s所指字符串中的每个非数字字符之后插入一个"*"号. 例如,形参s所指的字符串为:albc45sdtg56f,则执行结果为:a*1b*c ...
C语言编程＞第二十五周 ② 下列程序中，函数fun的功能是：将大写字母转换为对应小写字母之后的第五个字母，若为小写字母为v～z，使小写字母的值减21，转换后的小写字母作为函数值返回。
例题:下列程序中,函数fun的功能是:将大写字母转换为对应小写字母之后的第五个字母,若为小写字母为v-z,使小写字母的值减21,转换后的小写字母作为函数值返回. 例如,若形参是字母A,则转换为小写字母 ...
LinuxGUI自动化测试框架搭建（二十一）-截止第二十篇，如果出现以下错误，请修改代码+截止目前的全局配置文件config.py内容
(二十一)-截止第二十篇,如果出现以下错误,请修改代码 1 错误类型 2 原因分析 3 解决方法 4 修改common/screenShot.py 5 修改config/config.py 1 错误类 ...
“约见”面试官系列之常见面试题第二十篇之vuex得理解（建议收藏）
一.概念 vuex是一个专为vue.js应用程序开发的状态管理模式(它采用集中式存贮管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化). 二.五大核心属性核心属性为:sta ...
探讨Vue 数据监测原理-第五节-展开介绍 Vue中监测-【数组】数据的原理
文章目录探讨一下Vue 数据监测的原理本次探讨共的第五个章节第五节:展开介绍 Vue中监测-[数组]数据的原理 1. 案例 1.1. 页面案例 2. 数组形式|对象形式爱好的区别 2.1. 页面 ...
解决vue中img或元素背景图片无法显示或路径错误问题
1.在给vue中img元素动态绑定图片路径时会显示不出来图片: <span>普通:</span><img src="./video.png" alt= ...

第二十篇分享在VUE中使用data-view实现数据滚动显示并可点击

第二十篇分享在VUE中使用data-view实现数据滚动显示并可点击相关推荐

最新文章

热门文章

第二十篇 分享在VUE中使用data-view实现数据滚动显示并可点击

第二十篇 分享在VUE中使用data-view实现数据滚动显示并可点击相关推荐

最新文章

热门文章

第二十篇分享在VUE中使用data-view实现数据滚动显示并可点击

第二十篇分享在VUE中使用data-view实现数据滚动显示并可点击相关推荐