el-table中的某个字段最多显示两行，超出部分显示“...详情”，怎么办

文章目录

背景
- 需求
- 需求分析
解决方案
- 在线体验
- 灵感来源
- 我的实现方案
总结

背景

需求

比如，有如下一个表格，请你实现它：
在这里插入图片描述
要求：

最多显示两行
超出部分显示为：“…详情”
点击详情，展开全部内容

说明：本例以vue2版本为例，其他的同理

需求分析

Element UI的el-table组件，给我们提供了一个好用的属性show-overflow-tooltip，即：

最多显示一行
超出显示省略号
鼠标悬停时显示全部内容

效果如下：
在这里插入图片描述

但是，我们现在需要显示两行，所以这个属性不符合我们的需求。

解决方案

在线体验

灵感来源

我在其他论坛上看到一篇文章：https://juejin.cn/post/7347221074704777226
他的核心思想是用CSS 滚动驱动动画和CSS 样式查询等较新的CSS属性来实现，是比较好的思路，确实也实现了。
但是不适用在el-table中：

新属性不是100%兼容，需要较新的浏览器版本(Chrome 115+)；
el-table有某些样式影响，所以导致无法实现；

该博主的示例代码如下：
效果如下：
在这里插入图片描述
也有一些其他人的实现思路，有异曲同工之妙，此处不一一细说了。

我的实现方案

思路：既然是在el-table中，那就需要自定义写样式，且表格中有循环，基于上述代码受影响而不生效，所以此处只能用js来辅助了，纯靠CSS是行不通的了。

我的示例代码如下：

<template><el-table :data="tableData"><el-table-column label="URL地址" prop="url" align="center" /><el-table-column label="作废原因" prop="remark" align="center" width="270"><template v-slot="scope"><div class="remark-cell"><div:class="['remark-content', { 'expanded': scope.row.isExpanded }]":ref="`remarkRef_${scope.$index}`":data-index="`remarkRef_${scope.$index}`">{{ scope.row.remark }}</div><spanv-if="scope.row.needExpand"class="expand-btn"@click="toggleExpand(scope.row)">{{ scope.row.isExpanded ? '收起' : '详情' }}</span></div></template></el-table-column></el-table>
</template>
<script>
export default {data() {
tableData: [{id: 1,isExpanded: false,needExpand: false,remark: '汉水东流，都洗尽、髭胡膏血。人尽说、君家飞将，旧时英烈。破敌金城雷过耳，谈兵玉帐冰生颊。想王郎、结髮赋从戎，传遗业。腰间剑，聊弹铗。尊中酒，堪为别。况故人新拥，汉坛旌节。马革裹尸当自誓，蛾眉伐性休重说。但从今、记取楚楼风，庾台月。","translate":"汉水滔滔，向东流去；它冲净了那些满脸长着鬍鬚的敌人嘴上沾着人民的膏血。人们都说：当年你家的飞将军，英勇威列地打击敌人。攻破敌人坚固的城池的时候，迅速勇猛，像迅雷过耳那么快；在玉帐里谈论兵法或者是研究战术的时候，态度激昂兴奋，语言慷慨激烈，两颊都结了冰。回想王郎，你才到结发的年令，就从事戎马生活。'},{id: 2,isExpanded: false,needExpand: false,remark: '111',},{id: 3,isExpanded: false,needExpand: false,remark: '大江东去、浪淘尽、髭胡膏血。人尽说、君家飞将，旧时英烈。破敌金城雷过耳，谈兵玉帐冰生颊。想王郎、结髮赋从戎，传遗业。腰间剑，聊弹铗。尊中酒，堪为别。况故人新拥，汉坛旌节。马革裹尸当自誓，蛾眉伐性休重说。但从今、记取楚楼风，庾台月。","translate":"汉水滔滔，向东流去；它冲净了那些满脸长着鬍鬚的敌人嘴上沾着人民的膏血。人们都说：当年你家的飞将军，英勇威列地打击敌人。攻破敌人坚固的城池的时候，迅速勇猛，像迅雷过耳那么快；在玉帐里谈论兵法或者是研究战术的时候，态度激昂兴奋，语言慷慨激烈，两颊都结了冰。回想王郎，你才到结发的年令，就从事戎马生活。'},],},methods: {// 切换展开状态toggleExpand(row) {this.$set(row, 'isExpanded', !row.isExpanded)},// 检查是否需要展开按钮checkNeedExpand() {this.$nextTick(() => {this.tableData.forEach((row, index) => {const refKey = `remarkRef_${index}`const el = this.$refs[refKey]if (el && el.scrollHeight > el.clientHeight) {this.$set(row, 'needExpand', true)} else {this.$set(row, 'needExpand', false)}})})}}
}
</script>
<style lang="scss" scoped>
.remark-cell {position: relative;width: 100%;padding-right: 8px;
}.remark-content {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;word-break: break-all;line-height: 1.5;
}.remark-content.expanded {-webkit-line-clamp: unset;
}.expand-btn {color: #409EFF;cursor: pointer;margin-left: 4px;position: absolute;right: -10px;bottom: -3px;
}.expand-btn:hover {opacity: 0.8;
}
</style>