ElementUI Table实现多行省略，鼠标移动上去显示所有文字内容

在ElementUI的Table组件中，要实现多行文本省略且鼠标悬停时显示全文，可以使用CSS来控制文本的省略与显示。以下是一个简单的实现方式：

1. 定义CSS样式，使得单行文本超出时显示省略号，鼠标悬停时显示全文。
2. 在Table中应用这个样式。

CSS样式代码：

.ellipsis {
  width: 200px; /* 定义显示的宽度 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  cursor: pointer; /* 将鼠标样式改为手形，提示可点击 */
}
.ellipsis:hover {
  white-space: normal; /* 鼠标悬停时换行显示全文 */
  overflow: visible; /* 不再隐藏文本 */
  text-overflow: none; /* 省略号不显示 */
}

ElementUI Table组件中使用这个样式的示例代码：

<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">
        <div class="ellipsis">{{ scope.row.info }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '张三', info: '这是一段很长的文本，需要省略显示，鼠标悬停时展示全文。' },
        // ...更多数据
      ]
    };
  }
};
</script>
 
<style>
.ellipsis {
  width: 200px; /* 定义显示的宽度 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  cursor: pointer; /* 将鼠标样式改为手形，提示可点击 */
}
.ellipsis:hover {
  white-space: normal; /* 鼠标悬停时换行显示全文 */
  overflow: visible; /* 不再隐藏文本 */
  text-overflow: none; /* 省略号不显示 */
}
</style>

在这个例子中，.ellipsis 类定义了文本的显示规则，而 :hover 伪类则在鼠标悬停时改变显示规则，从而实现了文本的省略显示与全文展示。