表格组件中，超出单元格宽度的截断文本如何在弹窗中显示完整内容？

Question

在表格组件中，使用固定列宽限制单元格宽度后，一些超出宽度的文本将会被省略。如何实现单元格内容省略时，鼠标悬停到相应位置，弹出提示框显示完整内容

Answer 1

解决方案

可以使用开源图表组件VTable来实现这一效果。 VTable可以配置

isShowOverflowTextTooltip

实现悬停弹出poptip来显示已经省略的完整文本。

代码示例

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

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

结果

在线演示：https://codesandbox.io/s/vtable-showoverflowtexttooltip-qq597m

相关文档

工具提示教程：https://visactor.io/vtable/guide/components/tooltip

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

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