快捷導(dǎo)航

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

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

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

vue 超長(zhǎng)文本截取，懸浮框提示

樣式：

<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ǔ)充知識(shí)：前端使用ElementUI +Vue table表頭添加tooltip懸浮提示框

廢話不多說(shuō)，看代碼~

<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，只想讓超出長(zhǎng)度并且

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

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

您可能感興趣的文章:

相關(guān)文章

Vue.js實(shí)現(xiàn)無(wú)限加載與分頁(yè)功能開(kāi)發(fā)
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)無(wú)限加載與分頁(yè)功能開(kāi)發(fā)實(shí)踐，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
Vue2+ElementUI利用計(jì)算屬性實(shí)現(xiàn)搜索框功能
這篇文章主要為大家詳細(xì)介紹了Vue2和ElementUI如何利用計(jì)算屬性實(shí)現(xiàn)搜索框功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下
2024-11-11
Vue.Draggable實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了Vue.Draggable實(shí)現(xiàn)拖拽效果，使用簡(jiǎn)單方便，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
利用vue實(shí)現(xiàn)打印頁(yè)面的幾種方法總結(jié)
在項(xiàng)目里有個(gè)打印功能,將頁(yè)面的部分內(nèi)容打印出來(lái),所以下面這篇文章主要給大家介紹了關(guān)于利用vue實(shí)現(xiàn)打印頁(yè)面的幾種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
vue中關(guān)于$emit和$on的使用及說(shuō)明
這篇文章主要介紹了vue中關(guān)于$emit和$on的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
在vue項(xiàng)目中集成graphql(vue-ApolloClient)
這篇文章主要介紹了在vue項(xiàng)目中集成graphql(vue-ApolloClient)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue中大屏適配和局部適配的方案總結(jié)
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue.js的Mixins功能結(jié)合JavaScript實(shí)現(xiàn)頁(yè)面內(nèi)容的自適應(yīng)縮放,以適應(yīng)不同比例的屏幕,需要的小伙伴可以參考下
2025-03-03
vue3使用reactive賦值后頁(yè)面不改變
本文主要介紹了vue3使用reactive賦值后頁(yè)面不改變，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue路由history模式頁(yè)面刷新404解決方法Koa?Express
這篇文章主要為大家介紹了vue路由history模式頁(yè)面刷新404解決方法（Koa?Express）詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
vue實(shí)現(xiàn)前端拖拽div位置交換的方法詳解
這篇文章主要介紹了如何使用Vue技術(shù)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的備忘錄應(yīng)用,包括添加條目和拖拽條目?jī)蓚€(gè)功能,文章還詳細(xì)解釋了如何使用Vue的draggable屬性和JavaScript獲取同級(jí)元素節(jié)點(diǎn)的方法,需要的朋友可以參考下
2025-01-01