vue实现鼠标放上去就有提示_使用VUE实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部...

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

{{item.id}}

{{item.name.substr(0, 8)}} ... {{item.name}}

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

}

});

}

}

}

.dpop{

position:absolute;

z-index:3;

border:1px dashed #EEF;

background:#EEE;

}