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是行不通的了。

我的示例代码如下：

javascript 复制代码

<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>
            <span
              v-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>

我的效果图如下：

总结

实现的不是很完美，但是也达到了它的效果，大家有啥好方法吗，可以评论一下。