elementUi——table表格中内容超过2行后，省略号...展示，鼠标悬停展示全部

在Element UI的Table组件中，如果需要在单元格内容超过两行后显示省略号，并且鼠标悬停时展示全部内容，可以通过CSS来实现。

以下是实现这一功能的CSS样式和Vue组件示例代码：

CSS样式：

/* 设置单元格的最大高度和行高，确保内容超过两行后出现省略号 */
.el-table .el-table__body .cell {
  max-height: 40px; /* 设置最大高度为40px */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 文字溢出显示省略号 */
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-line-clamp: 2; /* 限制在两行 */
  -webkit-box-orient: vertical; /* 垂直排列盒子 */
  line-height: 20px; /* 行高，根据需要设置 */
}
 
/* 鼠标悬停时显示全部内容 */
.el-table .el-table__body .cell:hover {
  overflow: visible;
  white-space: normal;
  text-overflow: inherit;
  -webkit-line-clamp: none;
}

Vue组件：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="详细内容">
      <template slot-scope="scope">
        <!-- 这里的内容会在超过两行后显示省略号 -->
        {{ scope.row.content }}
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 填充数据
      ]
    };
  }
};
</script>

确保在Vue组件的<style>标签或外部CSS文件中引入上述CSS样式。这样就可以实现单元格内容超过两行后显示省略号，鼠标悬停时展示全部内容的效果。