使用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 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
VSCode搭建Vue项目的方法
Apr 30 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安装攻略:常见问题解答(三)
2006/10/09 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
extjs之去除s.gif的影响
2010/12/25 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
解决Python对齐文本字符串问题
2019/08/28 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
什么是规则表达式
2012/05/03 面试题
大学本科毕业生的自我鉴定
2013/11/26 职场文书
社会实践感言
2014/01/25 职场文书
测控技术自荐信
2014/06/05 职场文书
路政管理求职信
2014/06/18 职场文书
写给领导的感谢信
2015/01/22 职场文书
办公室主任岗位职责
2015/01/31 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
应届生简历自我评价
2015/03/11 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
详解MySQL集群搭建
2021/05/26 MySQL
ubuntu下常用apt命令介绍
2022/06/05 Servers