dv-scroll-board 鼠标移入单元格显示单元格所有数据

刘记代码

已于 2022-09-06 11:56:18 修改

阅读量3.2k

点赞数 4

分类专栏：项目遇到的问题文章标签： javascript 前端 vue

于 2022-09-06 11:54:39 首次发布

本文链接：https://blog.csdn.net/fdksfskldfdslkfs/article/details/126721641

版权

效果图: 在这里插入图片描述

//template
<div @mousemove="move">
	<div
	  class="table"
	   @mouseleave="leave"
	 >
	 	//列表
	   <dv-scroll-board
	     :config="config"
	     @mouseover="over"
	   >
	   </dv-scroll-board>
	   //悬浮框
	   <p
	     v-if="ifShow"
	     class

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

刘记代码

关注关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
3
评论
dv-scroll-board 鼠标移入单元格显示单元格所有数据

【代码】dv-scroll-board 鼠标移入单元格显示单元格所有数据。
复制链接

扫一扫

专栏目录

vue dv-scroll-board

sinat_42501006的博客

05-09

7471

view <dv-scroll-board :config="config2" style="height:286px;font-size:20px !important;overflow:hidden;" /> data config2: { data: [ [ '<span style="font-size:1rem;">11111111111111111111</span>', ..

js实现当鼠标移到表格上时显示这一格全部内容的代码

11-22

想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件，但是我没有用，还是自己写了一个。 css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 ...

3 条评论您还未登录，请先登录后发表或查看评论

dv-scroll-board 鼠标移入单元格显示单元格对应所有数据

syfyyds12138的博客

05-11

1082

使用dv-scroll-board 时鼠标悬浮在对应单元格显示单元格所有数据

使用DataV轮播表dv-scroll-board添加移入显示tooltip功能

最新发布

weixin_45511682的博客

05-20

513

dv-scroll-board轮播表添加移入tooltip提示。tooltip提示、datav、dv-scroll-board

关于控件三态中悬浮无效的原因！

Rgen_xiao的博客

04-29

591

以前经常碰到控件设置成这样： ImageButton android:id="@+id/iv_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawble/select.xml"/> 实际

优化大屏组件DataV的轮播表

weixin_39246975的博客

10-24

4971

优化大屏组件DataV的轮播表

解决vue轮翻效果数据加载后，页面无渲染效果问题

恒二哥的博客

10-13

1986

最近在做vue项目，做轮翻效果时，遇到数据从后台加载后无法渲染的问题，其中，config中data数据即为轮翻数据，align：表示显示位置，rowNum：表示轮翻显示的条数；

【可视化大屏】数据可视化大屏的那些事~

每天进步一点点, 靠近小目标一点点~

09-29

2029

首先看文档是否有配置若文档无配置 , 可使用伪类元素 :: after (不适用于有局部不同的元素)若有局部不同 , 则添加判断条件。

DataV轮播表组件dv-scroll-board宽度问题

mkbird的博客

06-26

5928

需求：使用dv-scroll-board显示多列数据时，由于其默认是平均分配宽度，会导致内容显示不全，我们要修改某一列的宽度，让它显示完全。解决方法：方法1：dv-scroll-board自带columnWidth:[]属性，该数组的每个参数即为对应列的宽方法2：f12查看该列对应的类名，通过样式穿透进行修改。注意，因为组件中原来的样式优先级较高，所以我们加上 /deep/和::v-deep效果一样，只是有些情况下不能使用/deep/时，我们采用::v-deep代替...

dv-scroll-board轮播表如何添加内部边框

Cabriella_的博客

03-28

331

dv-scroll-board轮播表如何添加内部边框

storyboard的scrollview使用小demo

03-15

storyboard的scrollview使用小demo

详解 vue better-scroll滚动插件排坑

08-28

vue better-scroll 滚动插件详解 BetterScroll 是一款移动端滚动插件，它的强大之处是解决移动端（已支持 PC）各种滚动场景需求的插件。BetterScroll 的核心是借鉴的 iScroll 的实现，它的 API 设计基本兼容 ...

vue使用better-scroll实现菜单列表左右联动

07-13

在现代前端开发中，Vue.js 是一款非常流行的轻量级框架，它提供了高效的数据绑定和组件化能力，使得开发者能够构建复杂且响应式的用户界面。而 Better-Scroll 是一个强大的滚动插件，它能帮助开发者在移动设备或者...

el-table-infinite-scroll:El-Table无限滚动

05-26

element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...

react-anchor-link-smooth-scroll:使用平滑滚动polyfillReact锚链的组件

05-02

安装依赖项： npm install react-anchor-link-smooth-scroll 添加脚本 import React from 'react' import ReactDOM from 'react-dom' import AnchorLink from 'react-anchor-link-smooth-scroll' const Smooth...

解决Vue基于DataV优化样式滚动表格(dv-scroll-board)轮翻效果数据加载后，js动态添加css样式失败的问题

someday____的博客

11-29

3977

最近在做vue项目，基于DataV做轮播效果时，遇到数据从后台加载后无法动态添加css样式渲染的问题，然后查询资料后解决了，记录一下。Vue大屏可视化DataV组件库。

Vue基于DataV优化样式滚动表格(dv-scroll-board)

小龙哒的博客

12-28

9854

效果代码 <template> <div> <dv-scroll-board :config="config" style="width: 800px; height: 220px" /> </div> </template> <script> export default { /** * header = [{value:label}] * data = [{对象}] */ props:

dv-scroll-board vue

max100c的博客

06-07

2054

dv-scroll-board vue

写一个dv-scroll-board鼠标移入信息显示完整的demo

04-20

好的，以下是一个简单的dv-scroll-board鼠标移入信息显示完整的示例代码： HTML代码： ```html <div class="scroll-board"> <ul> <li>这是一条消息1</li> <li>这是一条消息2</li> <li>这是一条消息3</li> <li>这是一条消息4</li> <li>这是一条消息5</li> </ul> </div> ``` CSS代码： ```css .scroll-board { width: 300px; height: 50px; overflow: hidden; border: 1px solid #ccc; } .scroll-board ul { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; animation: scroll-board 10s linear infinite; } .scroll-board ul li { position: absolute; top: 0; left: 0; height: 50px; line-height: 50px; padding: 0 20px; white-space: nowrap; } @keyframes scroll-board { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } ``` JavaScript代码： ```js var scrollBoard = document.querySelector('.scroll-board'); var messageList = scrollBoard.querySelector('ul'); var messageItems = messageList.querySelectorAll('li'); messageList.addEventListener('mouseover', function(e) { if (e.target.nodeName === 'LI') { e.target.setAttribute('title', e.target.textContent); } }); messageList.addEventListener('mouseout', function(e) { if (e.target.nodeName === 'LI') { e.target.removeAttribute('title'); } }); ``` 以上代码实现了一个可滚动的消息列表，并通过鼠标移入显示完整信息的效果。当鼠标移入某条消息时，该消息将显示完整内容；当鼠标移出时，完整内容消失。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交