使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
具体代码如下所示:
<template> <div> <table> <tr v-for="item in tableData" :value="item.value" :key="item"> <td> <div> <template> {{item.id}} </template> </div> </td> <td> <div @mouseover="mouseenterHander(item.id)" @mouseout="mouseoutHander(item.id)"> <template> <template> {{item.name.substr(0, 8)}} </template> <template v-if="item.name.length > 8"> ... </template> </template> </div> <div class="dpop" title="弹框" v-if="item.showFullName"> <template> {{item.name}} </template> </div> </td> </tr> </table> </div> </template> <script> const tableData= [ { id: 10, name: '欧美当地时间9月5日一早,大量网友纷纷反馈雅虎网站宕机,连带雅虎的邮件、搜索等服务也不可用。', showFullName: false, }, { id: 20, name: '从地域分布看,欧洲是雅虎本次宕机故障的重灾区,尤其是法国、西班牙、英国、意大利等,还有美国东西部、新加坡、印度、菲律宾等地,我国主要集中在广州、台北及附近地区。 目前,雅虎尚未发表任何公开声明。', showFullName: false, } ] ; export default { data() { return { tableData } }, methods: { say: function (message) { alert(message) }, mouseenterHander(id) { tableData.forEach(ele => { if(ele.id == id) { ele.showFullName = true } }); }, mouseoutHander(id) { tableData.forEach(ele => { if(ele.id == id) { ele.showFullName = false } }); } } } </script> <style scoped> .dpop{ position:absolute; z-index:3; border:1px dashed #EEF; background:#EEE; } </style>
总结
以上所述是小编给大家介绍的使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关推荐
-
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容 当状态为显示的时候, 该行第一个按钮为隐藏; 当状态为隐藏的时候, 该行第一个按钮为显示; 具体代码如下: <!-- 数据表格 --> <el-table :data="tableData" class="table" stripe border v-loading="loading"> <el-table-column type="ind
-
vue.js使用v-if实现显示与隐藏功能示例
本文实例讲述了vue.js使用v-if实现显示与隐藏功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1
-
Vue在页面右上角实现可悬浮/隐藏的系统菜单
这是个大多数网站很常见的功能,点击页面右上角头像显示一个悬浮菜单,点击页面其他位置或再次点击头像则菜单隐藏. 作为一个jQuery前端攻城狮实现这个功能可以说是很easy了,但是对只刚粗看了一遍vue文档的菜鸟来说,坑还是要亲自踩过才算圆满. 知识点 组件及组件间通信 计算属性 正文 1. 父组件 这里暂时只涉及系统菜单这一个功能,因此路由暂未涉及. 基本思路是:通过props将showCancel这个Boolean值传递到子组件,对父子组件分别绑定事件,来控制这个系统菜单的显示状态.其中在父组
-
Vue.js 点击按钮显示/隐藏内容的实例代码
实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d
-
vue实现密码显示隐藏切换功能
先给大家分享效果图: 具体实现代码如下所示: html: <group> <span>设置密码</span> <x-input :type="this.registration_data.pwdType" placeholder="请填写密码" @on-change="password"></x-input> <img :src="this.registration_da
-
详解vue中点击空白处隐藏div的实现(用指令实现)
简单想应该怎么实现? 1.肯定是给document增加一个click事件监听 2.当发生click事件的时候判断是否点击的当前对象 结合着本思路和指令咱们来实现. 简单介绍vue指令 一个指令定义对象可以提供如下几个钩子函数 (均为可选): bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中). update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNod
-
vue组件实现弹出框点击显示隐藏效果
本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了.所以只能在弹出页面点击取消实现关闭隐藏弹出框.这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏.然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在当前页面中(
-
vue.js-div滚动条隐藏但有滚动效果的实现方法
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐
-
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
具体代码如下所示: <template> <div> <table> <tr v-for="item in tableData" :value="item.value" :key="item"> <td> <div> <template> {{item.id}} </template> </div> </td> <td&g
-
vim中tagbar配置以及打字时隐藏鼠标的方法
在plugin/tagbar.vim里面的键映射改成: \ ['nexttag', '<tab>'], \ ['prevtag', '<f7>'], \ ['showproto', 'f'], \ ['openfold', ['u','+','<kPlus>', 'zo']], #加了个用u打开折叠,因为+号不方便. \ ['openallfolds', ['9','*', '<kMultiply>', 'zR']], \ ['closeallfolds',
-
vue element-ui里的table中表头与表格出现错位的解决
目录 element-ui里的table中表头与表格出现错位 解决方案 element-ui表格样式错乱调整方式 1.线没有对齐 2.fixed固定导致的高度问题 3.去掉鼠标hover修改背景色事件 element-ui里的table中表头与表格出现错位 现象: 原因:电脑显示的缩放引起的,并且发现同为webkit内核的Google浏览器和360浏览器中360浏览器显示正常,而Google浏览器才会出现这个问题. 解决方案 找到项目入口文件(敲黑板重点!!),添加全局样式: .el-table
-
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"> 用CSS实现超长字段被省略的简单方法
-
图片与文字半透明效果 鼠标移上不透明
该 DIV是半秀明状态,这样可以看到背景也可以衬托文字,当鼠标放到文字上的时候,DIV层彻底不透明,文字清淅显示出来,一般这种效果都是要配合JavaScript的,这样兼容性会更好. 图片与文字结合的半透明效果,鼠标移上不透明 .box{ width:600px; height:600px; padding:20px;} *{ margin:0; padding:0;} body{ background:url(http://files.jb51.net/demoimg/200910/wall.
-
vue.js获得当前元素的文字信息方法
1.获得当前点击的内容 <li @click="problem1"> 1. <span class="blue">关于公众号使用问题</span> <img src="../img/right.png" alt=""/> </li> 当我点击这个li标签的时候,我想要获得span里面的文字,可以使用这个方法: problem1: function(e){ consol
-
Vue 实现从文件中获取文本信息的方法详解
本文实例讲述了Vue 实现从文件中获取文本信息的方法.分享给大家供大家参考,具体如下: 最近在使用vue做项目的时候,遇到一个需求,界面中需要显示大量的说明文字,为了保持界面的整洁和赶紧,决定采用单独的文件来存储显示信息,然后通过文件读取的方式显示到界面上. 刚开始我使用的是File和FileReader对象获取,但是比较气人的是这两个对象是IE浏览器特有的属性,chrome不支持,而且为了安全起见,现在浏览器是不推崇这种做法的,因为很容易造成文件被外部恶意删除或增加内容,安全性太低.无奈之下,
-
vue+elementui实现点击table中的单元格触发事件--弹框
elementui中提供了点击行处理事件 查看位置: elementui的table事件 elementui的table中怎样点击某个单元格触发事件? 可以先看一下官网中table的自定义列模板代码 <template> <el-table :data="tableData" border style="width: 100%"> <el-table-column label="日期" width="180
-
vue element table中自定义一些input的验证操作
官网原话 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. 表单 el-form表单必备以下三个属性: :model="ruleForm" 绑定的数据内容 :rules="rules" 动态绑定的rules,表单验证规则 ref="ruleForm" 绑定的对象 template模块 其实问题关键就在于如何给el-form-item动态绑定p
-
Vue filter 过滤器、以及在table中的使用介绍
使用方法: // 双花括号中 {{ isActive | isActiveFitlter}} // 在v-bind 中 <div v-bind:id=" isActive | isActiveFitlter"></div> 一.组件中定义本地 Filter filters:{ isActiveFitlter : (value)=>{ return value===1?'激活':'冻结' } } 二.创建Vue实例前定义全局过滤器 Vue.filter('i
随机推荐
- JavaScript限定范围拖拽及自定义滚动条应用(3)
- ajax 入门基础之 XMLHttpRequest对象总结
- Perl中的10个操作日期和时间的CPAN模块介绍
- 使用docker快速搭建Spark集群的方法教程
- 浅谈Node异步编程的机制
- 通过yum升级CentOS/RHEL最小化安装的方法
- php 数组操作(增加,删除,查询,排序)等函数说明第1/2页
- PHP连接和操作MySQL数据库基础教程
- python中self原理实例分析
- 编写Python爬虫抓取暴走漫画上gif图片的实例分享
- JDBCTM 指南:入门2 - 连接
- C#实现的Win32控制台线程计时器功能示例
- python实现折半查找和归并排序算法
- ORACLE 回收站当前状态查询整理
- 通过BootStrap实现轮播图的实际应用
- JS实现的简易拖放效果示例
- JavaScript判断数组是否存在key的简单实例
- Java List双击事件实现方法
- 浅谈C++基类的析构函数为虚函数
- js时间比较 js计算时间差的简单实现方法