使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部


Posted in Javascript onSeptember 16, 2019

具体代码如下所示:

<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个隐藏鼠标移到时弹窗显示全部,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
初步了解javascript面向对象
Nov 09 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
js实现无限瀑布流实例方法
Sep 16 #Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 #Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 #jQuery
Vue实现滑动拼图验证码功能
Sep 15 #Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 #Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 #Javascript
layui使用label标签的方法
Sep 14 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
python画图的函数用法以及技巧
2019/06/28 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
应届行政管理专业个人自我评价
2013/12/28 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
高三学习决心书
2014/03/11 职场文书
开工典礼策划方案
2014/05/23 职场文书
校园文化标语
2014/06/18 职场文书
幼儿园六一主持词
2015/06/30 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
MSSQL基本语法操作
2022/04/11 SQL Server
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL