vue+elementUI實現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時顯示省略號
更新時間：2023年10月24日 09:19:50 作者：橘哥哥
這篇文章主要介紹了vue+elementUI實現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時顯示省略號,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue elementUI當(dāng)渲染文本超出一定字?jǐn)?shù)時顯示省略號
如圖，當(dāng)渲染的文字超出30字后顯示省略號
設(shè)置過濾器
filters: {
ellipsis(value) {
if (!value) return "";
if (value.length > 30) {
return value.slice(0, 30) + "...";
}
return value;
}
},
使用過濾器
<el-table-column label="題干" width="600">
<template slot-scope="scope">
<span>{{scope.row.content | ellipsis}}</span>
</template>
</el-table-column>
ok了~
vue elementui文本超出字?jǐn)?shù)時顯示省略號且鼠標(biāo)懸停時顯示省略全部信息
省略單行
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
省略多行
word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;//控制行數(shù) -webkit-box-orient: vertical;
鼠標(biāo)懸停時顯示省略全部信息
利用title屬性，在代碼中如下：
<div class="moduletitle" :title="titletest">{{ titletest }}</div>
data() {
return {
titletest: "測試測試測試測試測試測試測試測試測試測試測試測試",
}
}具體實現(xiàn)效果如下：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+TypeScript實現(xiàn)遞歸菜單組件的完整實例
Vue.js中的遞歸組件是一個可以調(diào)用自己的組件,遞歸組件一般用于博客上顯示評論,形菜單或者嵌套菜單,文章主要給大家介紹了關(guān)于Vue3+TypeScript實現(xiàn)遞歸菜單組件的相關(guān)資料,需要的朋友可以參考下2021-08-08
vue3 響應(yīng)式對象如何實現(xiàn)方法的不同點
這篇文章主要介紹了vue3 響應(yīng)式對象如何實現(xiàn)方法的不同點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
useEffect理解React、Vue設(shè)計理念的不同
這篇文章主要為大家介紹了useEffect理解React、Vue設(shè)計理念的不同詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
下面小編就為大家分享一篇淺談vue的幾種綁定變量的值 防止其改變的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程
自定義指令是對普通DOM元素進(jìn)行的底層操作,它是一種有效的的補(bǔ)充和擴(kuò)展,不僅可以用于定義任何的dom操作,并且是可以復(fù)用的,下面這篇文章主要給大家介紹了關(guān)于vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue登錄路由驗證的實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了vue axios同步請求解決方案,需要的朋友可以參考下2017-09-09
使用vue-router設(shè)置每個頁面的title方法
下面小編就為大家分享一篇使用vue-router設(shè)置每個頁面的title方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家介紹了vue與ant-tree結(jié)合偽造懶加載并可以查詢實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
vue3?setup語法糖各種語法新特性的使用方法(vue3+vite+pinia)
這篇文章主要介紹了vue3?setup語法糖各種語法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語法糖的各種新語法的使用方法,需要的朋友可以參考下2022-09-09