使用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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
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
用PHP生成excel文件到指定目录
2015/06/22 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
javascript学习网址备忘
2007/05/29 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
python中的函数用法入门教程
2014/09/02 Python
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
.NET程序员的数据库面试题
2012/10/10 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
管理科学大学生求职信
2013/11/13 职场文书
经销商培训邀请函
2014/01/21 职场文书
期中考试后的反思
2014/02/08 职场文书
综合素质评价自我评价
2015/03/06 职场文书
大学生入党群众意见书
2015/06/02 职场文书
财务管理制度范本
2015/08/04 职场文书
2016年十一促销广告语
2016/01/28 职场文书
关于感恩的作文
2019/08/26 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技