您好,登錄后才能下訂單哦!
小編給大家分享一下怎么使用VUE實(shí)現(xiàn)在table中文字信息超過5個(gè)隱藏鼠標(biāo)移到時(shí)彈窗顯示全部,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
具體代碼如下所示:
<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: '歐美當(dāng)?shù)貢r(shí)間9月5日一早,大量網(wǎng)友紛紛反饋雅虎網(wǎng)站宕機(jī),連帶雅虎的郵件、搜索等服務(wù)也不可用。', showFullName: false, }, { id: 20, name: '從地域分布看,歐洲是雅虎本次宕機(jī)故障的重災(zāi)區(qū),尤其是法國、西班牙、英國、意大利等,還有美國東西部、新加坡、印度、菲律賓等地,我國主要集中在廣州、臺(tái)北及附近地區(qū)。 目前,雅虎尚未發(fā)表任何公開聲明。', 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>
看完了這篇文章,相信你對(duì)“怎么使用VUE實(shí)現(xiàn)在table中文字信息超過5個(gè)隱藏鼠標(biāo)移到時(shí)彈窗顯示全部”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。