vue表格顯示字符串過(guò)長(zhǎng)的問(wèn)題及解決
做項(xiàng)目時(shí)，通常我們會(huì)遇到字符串過(guò)長(zhǎng)導(dǎo)致樣式不好看的問(wèn)題，這里有三種方式處理，第三種為最佳方案。
第一種
首先我們看下未做處理的樣式：
可以看到學(xué)院字段過(guò)長(zhǎng)，當(dāng)然我引用的el-table自帶的樣式給自動(dòng)換行了,但如果自己寫(xiě)的table會(huì)導(dǎo)致樣式很丑。
我們可以用el-collapse來(lái)進(jìn)行字符串處理
代碼如下：
<el-table-column prop="collegeName"
align="center"
width="150"
label="學(xué)院">
<template slot-scope="scope">
<el-collapse v-if="scope.row.collegeName !== null">
<el-collapse-item :title="scope.row.collegeName.substring(0,6)">
<div>{{scope.row.collegeName}}</div>
</el-collapse-item>
</el-collapse>
</template>
</el-table-column>
但是這個(gè)樣式非常丑
第二種
用el-tooltip處理,但是這種樣式有限制，必須給定div寬度，否則不能實(shí)現(xiàn)隱藏，而且完整字段的位置會(huì)出現(xiàn)偏移，還是原字符串長(zhǎng)度的中部，但是樣式比第一種好看一些。
<div style="width: 100px;height: 20px;float: left">
<el-tooltip class="item" effect="dark" :content="scope.row.product.name" placement="top-start">
<span style="max-width: 6em;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{scope.row.product.name}}</span>
</el-tooltip>
</div>
第三種
終極方案，依舊使用el-tooltip，只是結(jié)合一下一二種方式。
代碼如下：
<el-table-column prop="collegeName"
align="center"
width="150"
label="學(xué)院">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="scope.row.collegeName" placement="top-start">
<span>{{scope.row.collegeName.substring(0,8)}}...</span>
</el-tooltip>
</template>
</el-table-column>
我們可通過(guò)控制substring的第二個(gè)參數(shù)來(lái)控制顯示字符串的長(zhǎng)度
結(jié)果如下：
總結(jié)
ok，以上就是三種處理方式，推薦使用第三種，適用多個(gè)場(chǎng)景，不僅是表格。
好了，這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Vite項(xiàng)目使用less的實(shí)現(xiàn)步驟
最近學(xué)習(xí)在vite項(xiàng)目中配置less,本文主要介紹了Vue3+Vite項(xiàng)目使用less的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02
使用element-ui +Vue 解決 table 里包含表單驗(yàn)證的問(wèn)題
這篇文章主要介紹了使用element-ui +Vue 解決 table 里包含表單驗(yàn)證的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
最近在研究uni-app跨端開(kāi)發(fā)APP和H5的通訊和交互,比如H5調(diào)用APP的方法,APP往H5里面?zhèn)鲄?H5往app外面?zhèn)鲄?這篇文章主要給大家介紹了關(guān)于uniapp?webview和H5通信的3種方式,需要的朋友可以參考下2024-04-04
Vue項(xiàng)目啟動(dòng)白屏問(wèn)題的幾種解決辦法
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目啟動(dòng)白屏問(wèn)題的幾種解決辦法,Vue項(xiàng)目打包后出現(xiàn)白屏的可能原因有很多,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Vue中使用clipboard實(shí)現(xiàn)復(fù)制功能
這篇文章主要介紹了Vue中結(jié)合clipboard實(shí)現(xiàn)復(fù)制功能 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
使用Vue自定義指令實(shí)現(xiàn)Select組件
這篇文章主要介紹了使用Vue自定義指令實(shí)現(xiàn)Select組件,如果哪位朋友對(duì)vue自定義指令不是多了解的話，此篇文章會(huì)對(duì)你有所幫助的，需要的朋友可以參考下2018-05-05
Vue2中使用自定義指令實(shí)現(xiàn)el-table虛擬列表的代碼示例
在實(shí)際開(kāi)發(fā)中,我們可能會(huì)面臨其他需求,例如在 el-table 中無(wú)法使用分頁(yè)技術(shù)的情況下展示海量數(shù)據(jù),這種情況下,頁(yè)面可能會(huì)出現(xiàn)卡頓,嚴(yán)重時(shí)甚至可能引發(fā)瀏覽器崩潰,所以針對(duì)這個(gè)問(wèn)題本文給大家介紹了vue2中使用自定義指令實(shí)現(xiàn)el-table虛擬列表,需要的朋友可以參考下2025-01-01
vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能
這篇文章主要介紹了vue+vant實(shí)現(xiàn)商品列表批量倒計(jì)時(shí)功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)之scrollIntoView()方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)之scrollIntoView()方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue響應(yīng)式原理Observer、Dep、Watcher理解
這篇文章主要介紹了Vue響應(yīng)式原理-理解Observer、Dep、Watcher,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06