vue?element表格某一列內容過多,超出省略號顯示的實現
element表格某一列內容過多,超出省略號顯示
在使用element組件庫里面的table組件時,遇到某一個字段內容過多,導致td高度被撐開,布局顯得很不美觀,像這樣
這時我們只要給table-cloumn添加一個屬性show-overflow-tooltip,
<el-table-column label="描述" :show-overflow-tooltip='true'> <template slot-scope="scope"> <span>{{scope.row.ms}}</span> </template> </el-table-column>
實現超出隱藏,并有提示,這樣的話會有下面效果:
提示的長度特別長,超出了屏幕,不太好看。
可以在處理下樣式,如下:
<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>
這樣就好了,效果如下
如果想要設置,顯示幾行,超過指定的值再隱藏,可以參考下面
element-UI table文字超出兩行,隱藏多余文字,移入顯示tips
element-UI表格的列屬性
通過設置 :show-overflow-tooltip=“true” 這個屬性可以達成超出一行的文字用省略號替代,并帶有移入時tips顯示全部內容的需求。但是如果想要文本超出兩行、三行的需求,顯然設置這個屬性是無法完成的。
超出兩行隱藏多余文本,移入時tips顯示全部內容
我們想完成的是超出兩行才用省略號隱藏多余文本,并且移入才會有tips顯示;兩行以內的文本則不隱藏也不顯示tips。
超出的文本的隱藏
.myNote{ display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-line-clamp: 2; -webkit-box-orient:vertical; }
文本超過兩行,移入時tips顯示全部內容
<!-- 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>
注意! 顯示懸浮提示時v-model 和 disabled屬性要一起使用才有效果。
showTips(obj, row){ /*obj為鼠標移入時的事件對象*/ /*currentWidth 為文本在頁面中所占的寬度,創(chuàng)建標簽,加入到頁面,獲取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 /*當文本寬度小于||等于容器寬度兩倍時,代表文本顯示未超過兩行*/ currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true }
通過長度判斷
一開始我是想通過表格高度去判斷,但是后來發(fā)現,高度不是一個固定不變的值,會隨著移入移出變化,并且其他列的高度超出也會影響到一整行的高度。所以最后還是通過文本寬度來判斷,把文本寬度與容器寬度比較,這樣得到的值才是固定不變的。
有朋友說會出現多個tips,我是直接放在el-table-column的template里面的,目前沒發(fā)現這種情況。
<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>
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue+Element中table表格實現可編輯(select下拉框)
這篇文章主要介紹了vue+Element中table表格實現可編輯,實現select下拉框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-05-05Vue3項目中配置TypeScript和JavaScript的兼容
在Vue3開發(fā)中,常見的使用JavaScript(JS)編寫代碼,但也會有調整編寫語言使用TypeScript(TS)的需求,因此,在Vue3項目設置中兼容TS和JS是刻不容緩的重要任務,2023-08-08Vue項目如何保持用戶登錄狀態(tài)(localStorage+vuex刷新頁面后狀態(tài)依然保持)
關于vue登錄注冊,并保持登錄狀態(tài),是vue玩家必經之路,這篇文章主要給大家介紹了關于Vue項目如何保持用戶登錄狀態(tài)的相關資料,localStorage+vuex刷新頁面后狀態(tài)依然保持,需要的朋友可以參考下2022-05-05