vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào)
更新時(shí)間：2023年10月24日 09:19:50 作者：橘哥哥
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue elementUI當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào)
如圖，當(dāng)渲染的文字超出30字后顯示省略號(hào)
設(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ù)時(shí)顯示省略號(hào)且鼠標(biāo)懸停時(shí)顯示省略全部信息
省略單行
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)懸停時(shí)顯示省略全部信息
利用title屬性，在代碼中如下：
<div class="moduletitle" :title="titletest">{{ titletest }}</div>
data() {
return {
titletest: "測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試",
}
}具體實(shí)現(xiàn)效果如下：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue中利用全局路由鉤子給url統(tǒng)一添加公共參數(shù)的例子
今天小編就為大家分享一篇在vue中利用全局路由鉤子給url統(tǒng)一添加公共參數(shù)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家分享了一個(gè)非常實(shí)用的vue導(dǎo)航鉤子，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
VUE2響應(yīng)式原理使用Object.defineProperty缺點(diǎn)
這篇文章主要為大家介紹了VUE2響應(yīng)式原理使用Object.defineProperty缺點(diǎn)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue3中v-model實(shí)現(xiàn)雙向數(shù)據(jù)綁定的全面指南
在Vue開發(fā)中,v-model是實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間雙向綁定的關(guān)鍵指令,Vue 3對(duì)v-model進(jìn)行了重大改進(jìn),使其更加靈活和強(qiáng)大,本文將深入探討 Vue 3中v-model的工作原理、新特性以及最佳實(shí)踐,需要的朋友可以參考下2025-07-07
這篇文章主要介紹了在 Vue 中使用 JSX 及使用它的原因淺析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue.js如何刪除數(shù)組中指定索引的元素問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue.js動(dòng)畫中的js鉤子函數(shù)的實(shí)現(xiàn)
這篇文章主要介紹了vue.js動(dòng)畫中的js鉤子函數(shù)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vue3之toRefs和toRef在reactive中的一些應(yīng)用方式
這篇文章主要介紹了Vue3之toRefs和toRef在reactive中的一些應(yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue3自定義Echars組件附帶全局配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue實(shí)現(xiàn)將網(wǎng)頁內(nèi)容轉(zhuǎn)換為圖片并保存到本地
在?Vue2?項(xiàng)目中,將網(wǎng)頁內(nèi)容轉(zhuǎn)換為圖片并保存到本地,常?？梢酝ㄟ^第三方庫實(shí)現(xiàn),本文為大家整理了常用方案,實(shí)現(xiàn)步驟及示例代碼,需要的可以了解下2025-05-05