vue?element表格某一列內(nèi)容過多,超出省略號顯示的實(shí)現(xiàn)
element表格某一列內(nèi)容過多,超出省略號顯示
在使用element組件庫里面的table組件時(shí)，遇到某一個(gè)字段內(nèi)容過多，導(dǎo)致td高度被撐開，布局顯得很不美觀，像這樣
這時(shí)我們只要給table-cloumn添加一個(gè)屬性show-overflow-tooltip，
<el-table-column label="描述" :show-overflow-tooltip='true'>
<template slot-scope="scope">
<span>{{scope.row.ms}}</span>
</template>
</el-table-column>實(shí)現(xiàn)超出隱藏，并有提示，這樣的話會有下面效果：
提示的長度特別長，超出了屏幕，不太好看。
可以在處理下樣式，如下：
<style>
.el-tooltip__popper{
max-width:20%;
}
.el-tooltip__popper,.el-tooltip__popper.is-dark{
background:rgb(48, 65, 86) !important;
color: #fff !important;
line-height: 24px;
}
</style>這樣就好了，效果如下
如果想要設(shè)置，顯示幾行，超過指定的值再隱藏，可以參考下面
element-UI table文字超出兩行，隱藏多余文字，移入顯示tips
element-UI表格的列屬性
通過設(shè)置 :show-overflow-tooltip=“true” 這個(gè)屬性可以達(dá)成超出一行的文字用省略號替代，并帶有移入時(shí)tips顯示全部內(nèi)容的需求。但是如果想要文本超出兩行、三行的需求，顯然設(shè)置這個(gè)屬性是無法完成的。
超出兩行隱藏多余文本，移入時(shí)tips顯示全部內(nèi)容
我們想完成的是超出兩行才用省略號隱藏多余文本，并且移入才會有tips顯示；兩行以內(nèi)的文本則不隱藏也不顯示tips。
超出的文本的隱藏
.myNote{
display:-webkit-box;
text-overflow:ellipsis;
overflow:hidden;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
}
文本超過兩行，移入時(shí)tips顯示全部內(nèi)容
<!-- tips懸浮提示 -->
<el-tooltip
placement="top"
v-model="scope.row.showTooltip"
:open-delay="500"
effect="dark"
:disabled="!scope.row.showTooltip">
<div slot="content">{{scope.row.note}}</div>
<div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div>
</el-tooltip>
注意！ 顯示懸浮提示時(shí)v-model 和 disabled屬性要一起使用才有效果。
showTips(obj, row){
/*obj為鼠標(biāo)移入時(shí)的事件對象*/
/*currentWidth 為文本在頁面中所占的寬度，創(chuàng)建標(biāo)簽，加入到頁面，獲取currentWidth ,最后在移除*/
let TemporaryTag = document.createElement('span');
TemporaryTag.innerText = row.note;
TemporaryTag.className = 'getTextWidth';
document.querySelector('body').appendChild(TemporaryTag);
let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
document.querySelector('.getTextWidth').remove();
/*cellWidth為表格容器的寬度*/
const cellWidth = obj.target.offsetWidth
/*當(dāng)文本寬度小于||等于容器寬度兩倍時(shí)，代表文本顯示未超過兩行*/
currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true
}
通過長度判斷
一開始我是想通過表格高度去判斷，但是后來發(fā)現(xiàn)，高度不是一個(gè)固定不變的值，會隨著移入移出變化，并且其他列的高度超出也會影響到一整行的高度。所以最后還是通過文本寬度來判斷，把文本寬度與容器寬度比較，這樣得到的值才是固定不變的。
有朋友說會出現(xiàn)多個(gè)tips，我是直接放在el-table-column的template里面的，目前沒發(fā)現(xiàn)這種情況。
<el-table-column
prop="note"
label="簡介">
<template slot-scope="scope">
<!-- tips懸浮提示 -->
<el-tooltip
placement="top"
v-model="scope.row.showTooltip"
:open-delay="500"
effect="dark"
:disabled="!scope.row.showTooltip">
<div slot="content">{{scope.row.note}}</div>
<div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div>
</el-tooltip>
</template>
</el-table-column>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+Element中table表格實(shí)現(xiàn)可編輯(select下拉框)
這篇文章主要介紹了vue+Element中table表格實(shí)現(xiàn)可編輯，實(shí)現(xiàn)select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
Vue3項(xiàng)目中配置TypeScript和JavaScript的兼容
在Vue3開發(fā)中,常見的使用JavaScript（JS）編寫代碼,但也會有調(diào)整編寫語言使用TypeScript（TS）的需求,因此,在Vue3項(xiàng)目設(shè)置中兼容TS和JS是刻不容緩的重要任務(wù),2023-08-08
這篇文章主要介紹了vue在組件中使用v-model的場景，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
vue-next-admin項(xiàng)目使用cdn加速詳細(xì)配置
這篇文章主要為大家介紹了vue-next-admin項(xiàng)目使用cdn加速的詳細(xì)配置，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了如何區(qū)分vue中的v-show 與 v-if ，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-09-09
組合式 API 是一系列 API 的集合，使我們可以使用函數(shù)而不是聲明選項(xiàng)的方式書寫 Vue 組件，這篇文章主要介紹了什么是Vue3的組合式?API,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue中mint-ui環(huán)境搭建詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Vue如何將時(shí)間戳轉(zhuǎn)換日期格式,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了淺談VUE中演示v-for為什么要加key，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Vue項(xiàng)目如何保持用戶登錄狀態(tài)(localStorage+vuex刷新頁面后狀態(tài)依然保持)
關(guān)于vue登錄注冊,并保持登錄狀態(tài),是vue玩家必經(jīng)之路,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目如何保持用戶登錄狀態(tài)的相關(guān)資料,localStorage+vuex刷新頁面后狀態(tài)依然保持,需要的朋友可以參考下2022-05-05