VUE implemented using the text information in the table more than 5 hide, show all pop mouse over
<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>
</ the Table>
</ div>
</ Template>
<Script>
const TableData = [
{
the above mentioned id: 10,
name: 'Europe local time on September 5 morning, a large number of users have feedback Yahoo site is down, and it gets Yahoo Mail, search and other services are not available. ',
ShowFullName: false,
},
{
the above mentioned id: 20,
name:' In terms of geographical distribution to see that Europe is a failure of Yahoo this downtime hardest hit, especially in France, Spain, Britain and Italy, as well as the United States east and west, Singapore, India, the Philippines and other places, mainly concentrated in Guangzhou, Taipei and nearby areas. Currently, Yahoo has not made any public statement. ',
ShowFullName: to 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>