在表格组件中超出宽度被省略的文字如何通过弹窗显示完整内容？

Question

在表格组件中，使用固定列宽限制单元格宽度后，部分超过宽度的文体会省略。如何实现单元格内容被省略时，hover到相应位置，弹出提示框显示完整内容。

Answer 1

解决方案 Solution

可以使用开源图表组件VTable来实现这个效果。VTable可以通过配置isShowOverflowTextTooltip，来实现hover弹出poptip显示被省略的完整文字。

代码示例 Code Example

const option: TYPES.ListTableConstructorOptions = {
  records,
  columns,
  tooltip: {
    isShowOverflowTextTooltip: true
  }
};

// 创建 VTable 实例
const vtableInstance = new VTable.ListTable(
  document.getElementById("container")!,
  option
);

结果展示 Results

在线效果参考：https://codesandbox.io/s/vtable-showoverflowtexttooltip-qq597m

相关文档 Related Documentation

Tooltip demo：https://visactor.io/vtable/demo/component/tooltip

Tooltip 教程：https://visactor.io/vtable/guide/components/tooltip

相关api：https://visactor.io/vtable/option/ListTable#tooltip.isShowOve...

github：https://github.com/VisActor/VTable

Answer 2

不管什么ui库，应该都有tooltip组件，在表格中设置一下就行

Answer 3

element --> :show-overflow-tooltip="true"
antd --> 可以使用css加title属性实现