快捷導(dǎo)航

vue 實(shí)現(xiàn)超長文本截取,懸浮框提示

更新時間：2020年07月29日 09:33:28 作者：buzdaaa

這篇文章主要介紹了vue 實(shí)現(xiàn)超長文本截取,懸浮框提示，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue 超長文本截取，懸浮框提示

樣式：

<style>
 .overflow-table .ivu-table-cell{
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }
</style>

table：

<Table border :columns="comDataColunms" :data="comDataList" :loading="tableDataLoading" class="overflow-table table-context"></Table>

主要代碼：

{
 title: '統(tǒng)一信用代碼',
 key: 'ucCode',
 render: (h, params) => {
 return h('span', {
  domProps: {
  title: params.row.ucCode
  }
 }, params.row.ucCode)
 }
}

補(bǔ)充知識：前端使用ElementUI +Vue table表頭添加tooltip懸浮提示框

廢話不多說，看代碼~

<el-table
empty-text=“正在加載中…”
:data=“contentList”
style=“width: 100%”
@sort-change=“sort”
class=“pro-table-item”
tooltip-effect=“dark”

 <template v-for="(item,index) in titleList">
 　　 <el-table-column
  　　 v-if="index == '0'"
  　　 :prop="index.toString()"
  　　 :label="item"
  　　 sortable="custom"
  　　 min-width="120"
  　　 :render-header="renderHeader"
 　 　> 
 　　 </el-table-column>
  <el-table-column
   v-else
   :prop="index.toString()"
  　　 :label="item"
  　　 min-width="120"
  　　 :render-header="renderHeader"
  　　 show-overflow-tooltip

renderHeader(h, { column }) {
if(column.label.length>13) {
return (

{column.label}

)
} else {
return (
{column.label}
)
}
},

并不想讓所有的表頭都彈出tooltip，只想讓超出長度并且

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

以上這篇vue 實(shí)現(xiàn)超長文本截取,懸浮框提示就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue Antd 輸入框Input自動聚焦方式
這篇文章主要介紹了vue Antd 輸入框Input自動聚焦方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
10分鐘上手vue-cli 3.0 入門介紹
這篇文章主要介紹了10分鐘上手vue-cli 3.0 入門介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
八種vue實(shí)現(xiàn)組建通信的方式
這篇文章主要介紹是八種vue實(shí)現(xiàn)組建通信的方式，包括、props 父組件與子組件通信、$emit 子組件父組件傳遞、$emit與props結(jié)合兄弟組件傳值等等，想具體了解的朋友可以參考下面文章的具體內(nèi)容
2021-09-09
vue中使用定義好的變量設(shè)置css樣式詳解
vue項(xiàng)目中我們可以通過行內(nèi)樣式進(jìn)行動態(tài)修改樣式,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用定義好的變量設(shè)置css樣式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
vue攔截器如何增加token參數(shù)
這篇文章主要介紹了vue攔截器如何增加token參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue管理系統(tǒng)項(xiàng)目中的一些核心技能匯總
Vue是當(dāng)今增長最快的前端框架,Vue 平易近人、用途廣泛且性能卓越,它的語法非常直觀,并且具有友好的學(xué)習(xí)曲線,是開發(fā)人員最想學(xué)習(xí)的頂級前端庫之一,下面這篇文章主要給大家介紹了關(guān)于vue管理系統(tǒng)項(xiàng)目中的一些核心技能,需要的朋友可以參考下
2022-05-05
vue實(shí)現(xiàn)圖形驗(yàn)證碼登錄
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖形驗(yàn)證碼登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
vue之帶參數(shù)跳轉(zhuǎn)打開新頁面、新窗口
這篇文章主要介紹了vue之帶參數(shù)跳轉(zhuǎn)打開新頁面、新窗口方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
導(dǎo)致VUE頁面不刷新的問題分析及解決方法
由于 Vue 會在初始化實(shí)例時對 property 執(zhí)行 getter/setter 轉(zhuǎn)化,所以 property 必須在 data 對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的,這篇文章主要介紹了導(dǎo)致VUE頁面不刷新的問題分析及解決方法,需要的朋友可以參考下
2024-04-04
在vue中實(shí)現(xiàn)點(diǎn)擊選擇框阻止彈出層消失的方法
今天小編就為大家分享一篇在vue中實(shí)現(xiàn)點(diǎn)擊選擇框阻止彈出層消失的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09