vue 實現(xiàn)超長文本截取,懸浮框提示
更新時間：2020年07月29日 09:33:28 作者：buzdaaa
這篇文章主要介紹了vue 實現(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)
}
}
補充知識：前端使用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 實現(xiàn)超長文本截取,懸浮框提示就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)無限加載與分頁功能開發(fā)實踐，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Vue2+ElementUI利用計算屬性實現(xiàn)搜索框功能
這篇文章主要為大家詳細介紹了Vue2和ElementUI如何利用計算屬性實現(xiàn)搜索框功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下2024-11-11
這篇文章主要介紹了Vue.Draggable實現(xiàn)拖拽效果，使用簡單方便 ，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
在項目里有個打印功能,將頁面的部分內容打印出來,所以下面這篇文章主要給大家介紹了關于利用vue實現(xiàn)打印頁面的幾種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue中關于$emit和$on的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在vue項目中集成graphql(vue-ApolloClient)
這篇文章主要介紹了在vue項目中集成graphql(vue-ApolloClient)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了如何通過Vue.js的Mixins功能結合JavaScript實現(xiàn)頁面內容的自適應縮放,以適應不同比例的屏幕,需要的小伙伴可以參考下2025-03-03
本文主要介紹了vue3使用reactive賦值后頁面不改變，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue路由history模式頁面刷新404解決方法Koa?Express
這篇文章主要為大家介紹了vue路由history模式頁面刷新404解決方法（Koa?Express）詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了如何使用Vue技術實現(xiàn)一個簡單的備忘錄應用,包括添加條目和拖拽條目兩個功能,文章還詳細解釋了如何使用Vue的draggable屬性和JavaScript獲取同級元素節(jié)點的方法,需要的朋友可以參考下2025-01-01