element表格文本超出指定行使用popover展示
2024-10-17 本文已影响0人
坐在天台吹吹风
场景描述
使用element-ui开发后台管理，列表使用表格展示，有的字段内容会比较长。
展示及弊端
- 直接在列表进行展示，某个字段总是内容很长，会造成表格过高，同时也不美观。
- 使用show-overflow-tooltip属性，过长内容表格展示会隐藏，但是气泡框展示的时候内容过宽同样不美观。
- 对字段长度进行判断，大于设置长度展示气泡框，小于不展示。这样又会因为不同字符宽度不等，导致判断不精准，同样长度时表现不一致。
期待展示
需要表现一致的解决办法，内容少可以完全展示的时候不显示弹框直接展示，超出固定行数时展示弹框。
代码实现
以下代码作为示例，对其中remark字段进行判断，超出两行表格内显示省略号，弹框展示全部内容。
<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="创建时间" 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; //文字实际高度
scrollHeight > lineHeight * 2 ? this.popBool[this.list[i].id] = false : this.popBool[this.list[i].id] = true; //高度大于2行，有省略
this.componentKey++; //改变key，对组件重新渲染。
}
}, 500);
});
},
<style scoped>
.remark-wrap {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style>
注意点
-
标签的ref属性与字段popBool中内容应该保持相关且唯一。
相关：弹框popover中使用div展示remark字段，popover使用popBool判断是否展示，popBool中数据与div的ref属性应该保持一致性。
唯一：刚开始的时候想着index也是唯一的，所以使用了index。后来发现页面有时候应该出现弹框但是没有，检查是因为列表分页的原因，如果在for循环中使用i，那么不同的页面其实i都是相同的，因为其不唯一就会导致这种情况，所以换了id。 - getComputedStyle()是window对象自带的方法，用于获取指定元素的 CSS 样式，可以获取到任意样式。获取的样式是元素在浏览器中最终渲染效果的样式。
- -webkit-line-clamp(超出几行显示省略)样式设置时，应该与js超出几行显示弹框保持一致，否则会出现不对应的状况。
思考
如果一个table中有不止一个字段需要这样展示，又应该怎么设置？
假如以上代码中name字段同样需要超出展示，我们可以进行如下修改。
<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; //文字实际高度
scrollHeight1 > lineHeight * 2 ? this.popBoolName[this.list[i].id] = false : this.popBoolName[this.list[i].id] = true; //高度大于2行，有省略
修改说明
- 为了避免元素key重复，所以这次的key多加了一个字符连接来进行判断。
- data中新增了popBoolName，用来判断name属性。一个数组只能判断一个属性。
- for循环中，因为表格中内容每行行高是一样的，所以单行文字的行高不再获取一遍，只需要拿到操作字段的实际高度去和单行文字的行高判断即可。
