場(chǎng)景描述
使用element-ui開(kāi)發(fā)后臺(tái)管理俐末，列表使用表格展示，有的字段內(nèi)容會(huì)比較長(zhǎng)庄蹋。
展示及弊端
- 直接在列表進(jìn)行展示瞬内，某個(gè)字段總是內(nèi)容很長(zhǎng)，會(huì)造成表格過(guò)高限书，同時(shí)也不美觀虫蝶。
- 使用show-overflow-tooltip屬性，過(guò)長(zhǎng)內(nèi)容表格展示會(huì)隱藏倦西，但是氣泡框展示的時(shí)候內(nèi)容過(guò)寬同樣不美觀能真。
- 對(duì)字段長(zhǎng)度進(jìn)行判斷，大于設(shè)置長(zhǎng)度展示氣泡框扰柠，小于不展示粉铐。這樣又會(huì)因?yàn)椴煌址麑挾炔坏龋瑢?dǎo)致判斷不精準(zhǔn)耻矮，同樣長(zhǎng)度時(shí)表現(xiàn)不一致秦躯。
期待展示
需要表現(xiàn)一致的解決辦法，內(nèi)容少可以完全展示的時(shí)候不顯示彈框直接展示裆装，超出固定行數(shù)時(shí)展示彈框踱承。
代碼實(shí)現(xiàn)
以下代碼作為示例，對(duì)其中remark字段進(jìn)行判斷茎活，超出兩行表格內(nèi)顯示省略號(hào)，彈框展示全部?jī)?nèi)容采桃。
<el-table v-loading="loading" :data="list">
<el-table-column label="姓名" align="center" prop="name"/>
<el-table-column label="地址" align="center" prop="address" show-overflow-tooltip/>
<el-table-column :key="componentKey" label="備注" align="center" prop="remark">
<template slot-scope="{row}">
<el-popover placement="left" width="500" trigger="hover" v-if="!popBool[row.id]" :content="row.remark">
<div :ref="'popper'+row.id" slot="reference" class="remark-wrap">{{ row.remark }}</div>
</el-popover>
<div v-else>
{{ row.remark }}
</div>
</template>
</el-table-column>
<el-table-column label="創(chuàng)建時(shí)間" align="center" prop="createTime" width="180" />
</el-table>
componentKey: 0,
popBool: [], //false顯示pop丘损，true不顯示
// 列表查詢方法
getList() {
queryTable().then(res => {
this.list = res.rows;
setTimeout(() => {
for (var i = 0; i < this.list.length; i++) {
let lineHeight = getComputedStyle(this.$refs['popper' + this.list[i].id]).lineHeight.replace('px', '') - 0; //單行文字的行高
let scrollHeight = this.$refs['popper' + this.list[i].id].scrollHeight; //文字實(shí)際高度
scrollHeight > lineHeight * 2 ? this.popBool[this.list[i].id] = false : this.popBool[this.list[i].id] = true; //高度大于2行，有省略
this.componentKey++; //改變key呈础，對(duì)組件重新渲染而钞。
}
}, 500);
});
},
<style scoped>
.remark-wrap {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style>
注意點(diǎn)
-
標(biāo)簽的ref屬性與字段popBool中內(nèi)容應(yīng)該保持相關(guān)且唯一臼节。
相關(guān)：彈框popover中使用div展示remark字段官疲，popover使用popBool判斷是否展示途凫，popBool中數(shù)據(jù)與div的ref屬性應(yīng)該保持一致性。
唯一：剛開(kāi)始的時(shí)候想著index也是唯一的犀盟，所以使用了index阅畴。后來(lái)發(fā)現(xiàn)頁(yè)面有時(shí)候應(yīng)該出現(xiàn)彈框但是沒(méi)有贱枣，檢查是因?yàn)榱斜矸猪?yè)的原因纽哥，如果在for循環(huán)中使用i，那么不同的頁(yè)面其實(shí)i都是相同的只壳，因?yàn)槠洳晃ㄒ痪蜁?huì)導(dǎo)致這種情況吕世，所以換了id。 - getComputedStyle()是window對(duì)象自帶的方法尔艇，用于獲取指定元素的 CSS 樣式终娃，可以獲取到任意樣式。獲取的樣式是元素在瀏覽器中最終渲染效果的樣式窍荧。
- -webkit-line-clamp(超出幾行顯示省略)樣式設(shè)置時(shí)，應(yīng)該與js超出幾行顯示彈框保持一致瓤荔，否則會(huì)出現(xiàn)不對(duì)應(yīng)的狀況输硝。
思考
如果一個(gè)table中有不止一個(gè)字段需要這樣展示，又應(yīng)該怎么設(shè)置愉粤？
假如以上代碼中name字段同樣需要超出展示，我們可以進(jìn)行如下修改错邦。
<el-table-column :key="'name'+componentKey" label="姓名" align="center" prop="name">
<template slot-scope="{row}">
<el-popover placement="left" width="500" trigger="hover" v-if="!popBoolName[row.id]" :content="row.name">
<div :ref="'popperName'+row.id" slot="reference" class="remark-wrap">{{row.name}}</div>
</el-popover>
<div v-else>
{{ row.name }}
</div>
</template>
</el-table-column>
popBoolName: [],
let scrollHeight1 = this.$refs['popperName' + this.list[i].id].scrollHeight; //文字實(shí)際高度
scrollHeight1 > lineHeight * 2 ? this.popBoolName[this.list[i].id] = false : this.popBoolName[this.list[i].id] = true; //高度大于2行妆兑，有省略
修改說(shuō)明
- 為了避免元素key重復(fù)芯勘，所以這次的key多加了一個(gè)字符連接來(lái)進(jìn)行判斷腺逛。
- data中新增了popBoolName荷愕，用來(lái)判斷name屬性棍矛。一個(gè)數(shù)組只能判斷一個(gè)屬性。
- for循環(huán)中荐类，因?yàn)楸砀裰袃?nèi)容每行行高是一樣的，所以單行文字的行高不再獲取一遍，只需要拿到操作字段的實(shí)際高度去和單行文字的行高判斷即可。
參考鏈接
vue實(shí)現(xiàn)判斷文本是否超出，超出后顯示省略號(hào)并且hover展示全部?jī)?nèi)容，未超出的不加 Popover 彈出框
