el-table一列的内容最多显示5行，（根据自己需求，几行都可以），超出部分用省略号代替，鼠标悬停使用tooltip提示

在开发过程中，我们时常需要处理表格中的文本内容，尤其是在数据列的内容较多时，如何优雅地展示这些信息就成为了一个挑战。最近在工作中，我遇到了一个需求，需要使用 el-table 实现如下功能：

• 每列内容最多显示 5 行；
• 超出部分用省略号 (...) 代替；
• 鼠标悬浮时，显示完整的内容；
• 需要调整 Tooltip 的宽度，以适应不同长度的内容。

这个需求看起来不算复杂，但在实现时，涉及到了 CSS 样式的细节和 Element UI 的 Tooltip 配置。接下来，我将分享如何一步步实现这一功能。

1. 使用 el-table 创建基础表格

首先，我们需要在 Vue 项目中使用 el-table 创建一个基础表格，确保表格能够正确展示数据。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      label="Name"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="description"
      label="Description"
      width="300"
    >
      <template slot-scope="scope">
        <div class="text-ellipsis" :title="scope.row.description">
          {{ scope.row.description }}
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John Doe', description: 'This is a long description that needs to be truncated after five lines. It will overflow beyond the maximum height and show an ellipsis.' },
        { name: 'Jane Smith', description: 'Another example of a long description that exceeds the limit and will be truncated to five lines with ellipsis at the end.' }
      ]
    };
  }
};
</script>

<style scoped>
.text-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

在这个基础版本的代码中，我们使用了 el-table 来展示数据，并且在 description 列中，使用了 text-ellipsis 类来实现文本超出显示省略号。

关键点：

• -webkit-line-clamp: 5; 限制了文本的行数最多为 5 行。
• overflow: hidden; 隐藏了超出的文本。
• text-overflow: ellipsis; 给超出的部分加上省略号。

2. 添加 Tooltip 显示完整内容

为了确保用户能够看到完整的内容，我们可以在 div 元素上添加一个 el-tooltip，并利用 v-bind:title 动态设置显示的文本内容。

修改代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      label="Name"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="description"
      label="Description"
      width="300"
    >
      <template slot-scope="scope">
        <el-tooltip
          :content="scope.row.description"
          placement="top-start"
          :width="300"
        >
          <div class="text-ellipsis">
            {{ scope.row.description }}
          </div>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John Doe', description: 'This is a long description that needs to be truncated after five lines. It will overflow beyond the maximum height and show an ellipsis.' },
        { name: 'Jane Smith', description: 'Another example of a long description that exceeds the limit and will be truncated to five lines with ellipsis at the end.' }
      ]
    };
  }
};
</script>

<style scoped>
.text-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

关键点：

• el-tooltip 用来包裹内容并在鼠标悬浮时显示完整文本。
• placement="top-start" 设置了 Tooltip 的显示位置，可以根据需求调整。
• :width="300" 动态绑定了 Tooltip 的宽度，确保它能够适应不同内容的长度。
• 也可以直接使用样式来控制 Tooltip 的宽度，但是要注意，有坑！！！！(不要加scoped！！！会不生效)

• <style>
      .el-tooltip__popper{
          max-width: 20%
      }
  </style>

3. 调整 Tooltip 的宽度

为了避免 Tooltip 显示时超出屏幕或与其他元素重叠，我们可以通过 width 属性动态调整它的宽度。上面代码中，我们为 Tooltip 设置了固定的宽度（300px），你可以根据实际需求进行调整，或者使用动态宽度来适配不同的内容。

4. 总结

通过以上步骤，我们成功实现了在 el-table 中限制每列内容最多显示 5 行，超出部分用省略号显示，并且鼠标悬浮时使用 Tooltip 显示完整内容的效果。这种方式不仅可以提高表格的可读性，还能提供良好的用户体验。

希望这篇博客对你有所帮助。如果你在实现过程中遇到其他问题，欢迎在评论区留言，和大家一起讨论。