这里的例子是在一个表格中,对其中一列的数据操作,文字超过6行就省略,并且用Popover组件来显示全部内容;如果不超过6行,则正常显示。
![vue实现判断文本是否超出,超出后显示省略号并且hover展示全部内容,未超出的不加 Popover 弹出框_第1张图片](http://img.e-com-net.com/image/info8/91deea0e4e31449ebf6c948cb45e3ed4.jpg)
![vue实现判断文本是否超出,超出后显示省略号并且hover展示全部内容,未超出的不加 Popover 弹出框_第2张图片](http://img.e-com-net.com/image/info8/070ef4fea38b4278a38e6437d0fff7aa.jpg)
:
// 样式
::v-deep .ellipsis6 {
.cell {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
}
}
// 页面
// 示例部分
<el-table-column :key="componentKey" align="center" label="栗子">
<template slot-scope="{row, $index}">
<el-popover
v-if="!popBool[$index]"
placement="top"
width="500"
trigger="hover"
:content="row.title"
>
<span
:ref="'text' + $index"
slot="reference"
>{{ row.title }}span>
el-popover>
<span v-else>{{ row.title }}span>
template>
el-table-column>
data() {
return {
componentKey: 0,
popBool: []
}
},
methods: {
getList() {
this.listLoading = true
getList(this.listQuery).then((res) => {
this.listLoading = false
if (res.status) {
this.list = res.data.list
this.total = res.data.total
setTimeout(() => {
for (var i = 0; i < this.list.length; i++) {
var lineHeight = getComputedStyle(this.$refs['text' + i]).lineHeight.replace('px', '') - 0
var scrollHeight = this.$refs['text' + i].scrollHeight
scrollHeight > lineHeight * 6 ? this.popBool[i] = false : this.popBool[i] = true
this.componentKey++
}
}, 500)
}
})
}
}