el-table显示三行，超过部分省略，鼠标悬浮弹框全部显示

你可以使用 `tooltip` 属性来实现鼠标悬浮弹框全部显示，同时使用 CSS 的 `text-overflow` 属性来省略超过部分。具体实现步骤如下：

1. 在 `el-table-column` 上设置 `tooltip` 属性，值为 `true`，表示启用鼠标悬浮弹框功能。

<el-table-column prop="name" label="姓名" tooltip="true"></el-table-column>

2. 使用 CSS 的 `text-overflow` 属性来省略超过部分。在 `el-table-column` 上设置 `class-name` 属性，值为自定义的类名。

<el-table-column prop="name" label="姓名" tooltip="true" class-name="ellipsis"></el-table-column>

3. 在 CSS 中定义 `.ellipsis` 类，设置 `text-overflow` 属性为 `ellipsis`，表示超过部分省略。

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这样设置后，当表格内容超过一定长度时，会自动省略超过部分，并在鼠标悬浮时弹出全部内容。

相关问题

el-table最多显示三行，超过部分省略，鼠标悬浮弹框全部显示

您可以在el-table中使用el-tooltip组件来实现这个需求。具体步骤如下：

1. 在el-table中设置需要省略显示的列的宽度和最大高度。

<el-table-column prop="content" label="内容" width="200">
  <template slot-scope="scope">
    <div class="cell-ellipsis">{{ scope.row.content }}</div>
  </template>
</el-table-column>

2. 在el-table-column的模板中使用一个div元素并设置一个class名为"cell-ellipsis"，用于实现文字省略显示。

.cell-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 60px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

3. 在el-table-column的模板中再次嵌套一个el-tooltip组件，并将需要显示的内容作为其content属性的值。

<el-table-column prop="content" label="内容" width="200">
  <template slot-scope="scope">
    <div class="cell-ellipsis">
      <el-tooltip class="item" effect="dark" content="{{ scope.row.content }}">
        {{ scope.row.content }}
      </el-tooltip>
    </div>
  </template>
</el-table-column>

4. 最后，在样式中定义.el-tooltip__popper的最大宽度，以便在鼠标悬停时显示全部内容。

.el-tooltip__popper {
  max-width: 500px;
}

这样，在el-table中，当内容超过三行时，它将被省略并在鼠标悬停时弹出完整的内容。

el-table鼠标悬浮显示字

在使用 `el-table` 组件时，要实现鼠标悬浮显示字的效果，可以使用 `tooltip` 属性。将要显示的内容通过 `tooltip` 属性绑定到表格中需要显示的列上即可。

例如，如果要在表格的某一列上悬浮显示内容，可以在对应列的 `el-table-column` 标签中添加 `tooltip` 属性，并将要显示的内容通过绑定的方式传递进去，如下所示：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" width="180">
    <template slot-scope="scope">
      <div v-tooltip="scope.row.name">{{ scope.row.name }}</div>
    </template>
  </el-table-column>
</el-table>

在上述代码中，`v-tooltip` 指令用于绑定鼠标悬浮时显示的内容，`scope.row.name` 表示当前行的姓名数据。当鼠标悬浮在姓名列上时，会显示相应的姓名。