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