使用VUE實(shí)現(xiàn)在table中文字信息超過5個(gè)隱藏鼠標(biāo)移到時(shí)彈窗顯示全部

更新時(shí)間：2019年09月16日 08:34:25 作者：li9club

這篇文章主要介紹了使用VUE實(shí)現(xiàn)在table中文字信息超過5個(gè)隱藏，鼠標(biāo)移到時(shí)彈窗顯示全部,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

具體代碼如下所示：

<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ū)，尤其是法國(guó)、西班牙、英國(guó)、意大利等，還有美國(guó)東西部、新加坡、印度、菲律賓等地，我國(guó)主要集中在廣州、臺(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>

總結(jié)

以上所述是小編給大家介紹的使用VUE實(shí)現(xiàn)在table中文字信息超過5個(gè)隱藏鼠標(biāo)移到時(shí)彈窗顯示全部,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

關(guān)于vuex狀態(tài)刷新網(wǎng)頁(yè)時(shí)數(shù)據(jù)被清空問題及解決
這篇文章主要介紹了關(guān)于vuex狀態(tài)刷新網(wǎng)頁(yè)時(shí)數(shù)據(jù)被清空問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
詳解win7 cmd執(zhí)行vue不是內(nèi)部命令的解決方法
這篇文章主要介紹了詳解win7 cmd執(zhí)行vue不是內(nèi)部命令的解決方法的相關(guān)資料,這里提供了解決問題的詳細(xì)步驟，具有一定的參考價(jià)值，需要的朋友可以參考下
2017-07-07
vue-router配合ElementUI實(shí)現(xiàn)導(dǎo)航的實(shí)例
下面小編就為大家分享一篇vue-router配合ElementUI實(shí)現(xiàn)導(dǎo)航的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue常用指令v-if與v-show的區(qū)別淺析
v-if和v-show的區(qū)別是前端面試中常問的基礎(chǔ)知識(shí)點(diǎn),v-if、v-show顧名思義就是用來判斷視圖層展示效果的,下面這篇文章主要給大家介紹了關(guān)于Vue常用指令v-if與v-show區(qū)別的相關(guān)資料,需要的朋友可以參考下
2021-10-10
詳解Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList
本篇文章主要介紹了詳解Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-08-08
Vue項(xiàng)目利用axios請(qǐng)求接口下載excel
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目利用axios請(qǐng)求接口下載excel，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
一文詳解如何在vue中實(shí)現(xiàn)文件預(yù)覽功能
很多Vue項(xiàng)目中都需要PDF文件預(yù)覽功能,比如合同ERP,銷售CRM,內(nèi)部文檔CMS管理系統(tǒng),內(nèi)置PDF文件在線預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于如何在vue中實(shí)現(xiàn)文件預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下
2022-10-10
vue draggable resizable gorkys與v-chart使用與總結(jié)
這篇文章主要介紹了vue draggable resizable gorkys與v-chart使用與總結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09
一文詳解Vue中渲染器的簡(jiǎn)單實(shí)現(xiàn)
渲染器用于完成渲染操作,比如在瀏覽器平臺(tái)上渲染器可以將虛擬DOM轉(zhuǎn)換為真實(shí)DOM,本文將通過一個(gè)簡(jiǎn)單例子來帶大家理解Vue中渲染器的工作過程,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下
2024-05-05
基于vue實(shí)現(xiàn)一個(gè)神奇的動(dòng)態(tài)按鈕效果
今天我們將利用vue的條件指令來完成一個(gè)簡(jiǎn)易的動(dòng)態(tài)變色功能按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2019-05-05