解锁Element-UI表格隐藏文字，尽览数据全貌，亲测有效！

让Element-UI表格中的多行文字单元格鼠标移入时显示提示框

在使用Element-UI构建表格时，当单元格中的文本内容超过两行时，默认情况下，多出的文本会自动隐藏。这可能会导致一些重要信息无法被用户看到。为了解决这个问题，我们可以通过一些简单的CSS和JavaScript代码，实现鼠标移入时显示完整内容的提示框。

如何操作：

1. 添加CSS代码：

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

.el-table-cell--tooltip {
  position: relative;
}

.el-table-cell--tooltip:hover {
  cursor: pointer;
}

.el-table-cell--tooltip .el-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.el-table-cell--tooltip:hover .el-tooltip {
  opacity: 1;
  visibility: visible;
}

2. 添加JavaScript代码：

const tooltips = document.querySelectorAll('.el-table-cell--tooltip');

tooltips.forEach(tooltip => {
  const content = tooltip.querySelector('.el-table-cell__content');

  if (content.scrollHeight > content.clientHeight) {
    tooltip.classList.add('el-table-cell--tooltip');
  }
});

3. 添加模板代码：

<el-table :data="tableData">
  <el-table-column prop="name" label="Name" width="150">
    <template slot-scope="scope">
      <div class="el-table-cell--tooltip" v-if="scope.row.name.length > 20">
        <div class="el-table-cell__content">{{ scope.row.name }}</div>
        <el-tooltip effect="dark" placement="top" content="scope.row.name"></el-tooltip>
      </div>
      <div v-else>{{ scope.row.name }}</div>
    </template>
  </el-table-column>
</el-table>

通过以上步骤，我们就完成了对Element-UI表格隐藏文字的显示设置。当鼠标移入单元格时，如果文字内容超过两行，就会显示完整的提示框，方便用户查看所有信息。

常见问题解答：

1. 为什么我的提示框无法显示？

• 确保您已经正确添加了CSS、JavaScript和模板代码。
• 检查提示框的定位和大小，确保它们不会被其他元素覆盖。

2. 如何自定义提示框的样式？

• 您可以在CSS代码中修改.el-table-cell--tooltip和.el-table-cell--tooltip .el-tooltip的样式。
• 您还可以使用effect和placement属性来自定义提示框的显示效果和位置。

3. 如何让提示框在鼠标移出时自动隐藏？

• 在JavaScript代码中添加以下代码：

tooltips.forEach(tooltip => {
  tooltip.addEventListener('mouseout', () => {
    tooltip.querySelector('.el-tooltip').style.opacity = 0;
    tooltip.querySelector('.el-tooltip').style.visibility = 'hidden';
  });
});

4. 如何让提示框始终可见，而不只是在鼠标移入时？

• 在CSS代码中删除.el-table-cell--tooltip:hover选择器。
• 在JavaScript代码中删除if (content.scrollHeight > content.clientHeight)条件。

5. 如何让提示框显示HTML内容？

• 在模板代码中，将content="scope.row.name"属性替换为content="<h1>{{ scope.row.name }}</h1>"。
• 在CSS代码中，调整.el-table-cell--tooltip .el-tooltip的padding和font-size属性以适应HTML内容。