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

喝一杯吧可以吗

解决方案 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" (https://link.segmentfault.com/?enc=OgHjVQsgYeqvmk79Z8vNQg%3D%3D.IVQymuQdODspCDc%2BOhrFQRa5hTu3%2FCpZwQIn%2B6W99Pq0q%2F%2BgLKer7eoUtXrNTGGnTmHd2K%2Fo3ku4A6Ydd7Xg%2Bw%3D%3D) "Sep-05-2023 09-57-48.gif" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250110/f05711be91d26f2cb3308926030dd8b3.png) 相关文档 Related Documentation Tooltip demo："https://visactor.io/vtable/demo/component/tooltip" (https://link.segmentfault.com/?enc=0hcD%2F4EEqHZ4PJ3OKFW4CQ%3D%3D.3QWEYOyypjzFYc0mH3gRa9yiJdV3TZ%2FFvMd4HAhUmfuDgAkooh37iMhnA8Nhs7K4gZFbnpXXj1%2Fs5%2BQVXDZrfQ%3D%3D) Tooltip 教程："https://visactor.io/vtable/guide/components/tooltip" (https://link.segmentfault.com/?enc=HBRkc%2Bu9jx9trAau9qEH3A%3D%3D.A0KcjJyw%2B78EvW9Hk7zUYVfDjaT1umdKq3At3kk%2BEtv1g814n4oXrjouCsfJRhFCJM7s0triH0IuuaWHG%2BixVQ%3D%3D) 相关api："https://visactor.io/vtable/option/ListTable#tooltip.isShowOve..." (https://link.segmentfault.com/?enc=dPM%2B1eEl6pOleqgx6UN%2Bsg%3D%3D.HJqJgiNIT1u3%2FMmKtPDTdlkGLb2zgUQ8u6Ez%2FsGsA0jE8LV3dtQwlSojULVgqjb6lgMqiypz%2Bbh6HOB5P778CAAP3Jaw9%2FH55vd8FDIU3QQ%3D) github："https://github.com/VisActor/VTable" (https://link.segmentfault.com/?enc=pOOXXNZhWYnQg5I8paNIPQ%3D%3D.2TNpihHRD1ZDOxVCDSfz4t8llZP0Bm2Bw1Y55q%2Be4KXkVw6gm%2F5Bcppde8Gq2cMe)