使用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 相关文章推荐
基于jQuery的倒计时插件代码
May 07 Javascript
js字符串操作方法实例分析
May 06 Javascript
微信JSSDK上传图片
Aug 23 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 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
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python实现堆排序的实例讲解
2020/02/21 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
Python实现疫情地图可视化
2021/02/05 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
2014年小学元旦活动方案
2014/02/12 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
兵马俑导游词
2015/02/02 职场文书
个人维稳承诺书
2015/05/04 职场文书
亮剑观后感300字
2015/06/05 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
go结构体嵌套的切片数组操作
2021/04/28 Golang
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python