在表格组件中单元格的宽高怎么根据内容自动计算？-灵析社区
正确计算方式我有个需求场景是：单元格内容可能会出现换行符，并且同列的单元格内容长度不一样，同行的单元格的样式可能不一样，但是想要内容展示完整，所以要求表格组件可以实现根据内容的宽高来自动撑开单元格，哪个表格组件可以实现这个效果呢？
通了顺畅了可以使用开源图表组件VTable来实现这个效果，VTable可以配置宽度高度的自动计算模式。
代码参考：
const records = [
{
"230517143221027": "CA-2018-156720",
"230517143221030": "JM-15580",
"230517143221032": "Bagged Rubber Bands",
},
{
"230517143221027": "CA-2018-115427",
"230517143221030": "EB-13975",
"230517143221032": "GBC Binding covers",
},
{
"230517143221027": "CA-2018-115427",
"230517143221030": "EB-13975",
"230517143221032": "Cardinal Slant-D Ring Binder,\n Heavy Gauge Vinyl",
},
{
"230517143221027": "CA-2018-143259",
"230517143221030": "PO-18865",
"230517143221032": "Bush Westfield Collection Bookcases, Fully Assembled",
},
{
"230517143221027": "CA-2018-126221",
"230517143221030": "CC-12430",
"230517143221032":
"Eureka The Boss\n Plus 12-Amp Hard Box Upright Vacuum, Red"
}
];
const columns = [
{
field: "230517143221027",
caption: "Order ID"
},
{
field: "230517143221030",
caption: "Customer ID"
},
{
field: "230517143221032",
caption: "Product Name",
style: {
fontSize(args: any) {
if (args.row % 2 === 1) return 20;
return 12;
}
}
}
];
const option = {
records,
columns,
limitMaxAutoWidth: 800,
widthMode: "autoWidth",
heightMode: "autoHeight"
};
// 创建 VTable 实例
const vtableInstance = new VTable.ListTable(
document.getElementById("container")!,
option
);
结果展示：
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250108/eff87fa58eabc67a52664e5f1bcd678d.png)
在线效果参考："https://codesandbox.io/s/vtable-widthmode-heightmode-56m24x" (https://link.segmentfault.com/?enc=rq3TCwWSHOxjEyA3yEMviw%3D%3D.2Q0vX9wFGKnjlE0hLd4yeNvTdMBfm1CYHpqYTnyAHCQX8Jt7qItJAxCJM8wSQpHXb%2BfCgffuxveJUHdcIwuYtA%3D%3D)
相关文档：
基本表格demo："https://visactor.io/vtable/demo/table-type/list-table" (https://link.segmentfault.com/?enc=xWTkDx3q9ZkAeWKdwCafXw%3D%3D.hqE%2F8NKFv2I208iU4wagZ45lH9Y3kPw5fPOOjp6T6tDIMlbB4Hfd%2BS317T6PAWiIXG1CL6MMLWnYK%2BI9SxCu0A%3D%3D)
行高列宽教程："https://visactor.io/vtable/guide/basic_function/row_height_co..." (https://link.segmentfault.com/?enc=L6qNHZpyEEQS5WxN8F76cQ%3D%3D.asusyoV8is%2FqJOn%2BE7IdsMDDAQAFuKYjz%2F1ukDM%2B6Z%2BxJlD%2B75N1Z81bgLe8GbOHYx0H5SENV%2BxgvoO7Ba3FwwQxG9z09m2pb2WmkC22tQA%3D)
相关api："https://visactor.io/vtable/option/ListTable#widthMode" (https://link.segmentfault.com/?enc=VC4IYsi26kvFafa6FuZz5g%3D%3D.EbDumz0lQXR9CoUVrmI53GSLfG%2FxLYL7yuzUCMIrxmFVmUZM6Z8i67AuYRLf%2FT3qiTtpxJHoofC9S0KWnNj7OA%3D%3D)('standard'%20%7C%20'adaptive'%20%7C%20'autoWidth')%20=%20'standard'
github："https://github.com/VisActor/VTable" (https://link.segmentfault.com/?enc=W85MHPf%2FSPEpX6rR%2FcXGYQ%3D%3D.S9Msxn7qiyNiycaPS7I1g0VSLU3mHvLmLFA2U80u8N13DtEBXh0MuyYU9w0CcR5B)