Element ui table表格內(nèi)容超出隱藏顯示省略號問題
更新時間：2023年11月17日 09:46:21 作者：阿wei程序媛
這篇文章主要介紹了Element ui table表格內(nèi)容超出隱藏顯示省略號問題,具有很好的參考價值,希望對大家有所幫助,
Element ui table表格內(nèi)容超出隱藏顯示省略號
element ui官方文檔上面有個參數(shù)
:show-overflow-tooltip="true"
給el-table-column設(shè)置:show-overflow-tooltip="true"屬性可以使單元格超出的內(nèi)容被隱藏顯示為...
當(dāng)鼠標(biāo)移入時單元格的上方會彈出一個tooltip來顯示單元格的所有內(nèi)容。
<el-table v-loading="loading" :data="collectionList" @selection-change="handleSelectionChange">
<el-table-column label="藏品名稱" align="center" prop="worksName" :show-overflow-
tooltip="true" />
</el-table>效果圖：
有時候因為table中的文字非常的多，而show-overflow-tooltip默認(rèn)是把折疊的內(nèi)容全部折疊為一行。
那么當(dāng)文字多的時候視覺體驗就會變得比較差。
我們可以對此進(jìn)行樣式修改。
tips的class名為.el-tooltip__popper，我們可以寫css樣式，但需要注意的是，在樣式里面寫scoped，.el-tooltip__popper樣式無效，但是去掉scoped又有可能影響到其他頁面的樣式
解決辦法
就是，再寫一個<style></style>樣式。
<style>
.el-tooltip__popper {
max-width: 60px;
}
</style>效果圖：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了elementUI 動態(tài)生成幾行幾列的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
由于在項目中需要對數(shù)據(jù)進(jìn)行可視化處理,也就是用圖表展示,眾所周知echarts是非常強(qiáng)大的插件,所以這篇文章主要給大家介紹了關(guān)于vue+echarts圖表使用的相關(guān)資料,需要的朋友可以參考下2021-09-09
本篇文章主要介紹了如何在 Vue.js 中使用第三方j(luò)s庫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了Vue 使用計時器實現(xiàn)跑馬燈效果，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
這篇文章主要為大家介紹了vue2實現(xiàn)帶有阻尼下拉加載的功能示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家詳細(xì)介紹了如何封裝一個隨機(jī)驗證碼的VUE組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了Vue中原生template標(biāo)簽失效如何解決，找了整一天也沒找著這事件為什么觸發(fā)不了，第二天意識到原生代碼里的template可能有問題，在原生環(huán)境中template標(biāo)簽內(nèi)部的東西是不會渲染出來的，雖然解析器在加載頁面的時候確實會處理這部分代碼片段2023-02-02
vue+element實現(xiàn)動態(tài)換膚的示例代碼
本文主要介紹了vue+element實現(xiàn)動態(tài)換膚的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了vue3 diff 的算法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue.sync修飾符與$emit(update:xxx)詳解
這篇文章主要介紹了Vue.sync修飾符與$emit(update:xxx),實現(xiàn)思路非常簡單，文章介紹了.sync修飾符的作用和使用.sync修飾符的寫法，實現(xiàn)代碼簡單易懂對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11