elementui table超出两行显示...鼠标已入tip显示

在Element UI的Table组件中，如果你想要在单元格内容超出两行时显示为省略号（...），并且当鼠标悬停在单元格上时，通过Tooltip组件显示完整内容，你可以使用以下的方法：

1. 使用Table组件的show-overflow-tooltip属性来让单元格内容超出时自动显示Tooltip。
2. 使用CSS来确保内容超出特定行数时显示省略号。

以下是实现这一功能的示例代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    max-height="200"
    show-overflow-tooltip>
    <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
      prop="address"
      label="地址"
      :show-overflow-tooltip="true">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路1518号上海市普陀区金沙江路1518号上海市普陀区金沙江路1518号'
      }, /* ... more data ... */]
    }
  }
}
</script>
 
<style>
/* 确保单元格内容超出两行显示省略号 */
.el-table .el-table__body td {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

在这个例子中，max-height="200"确保了表格行高固定的情况下，单元格最多显示两行文本。CSS样式中的-webkit-line-clamp属性是一个非标准属性，它可以让盒子中的内容显示为多行，并在超出指定的行数时显示省略号。当鼠标悬停在超出行数的单元格上时，由于show-overflow-tooltip属性的作用，会自动显示完整内容的Tooltip。