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