我有一个要求,表格中的单元格内容可能包含换行符,并且同一列中的单元格的内容长度可能有所不同。此外,同一行中的单元格样式可能不同。但是,我希望内容能够完整显示,所以我需要一个表格组件,可以根据单元格的内容自动调整单元格的宽度和高度。哪个表格组件可以达到这样的效果?
最好举个例子
可以使用开源图表组件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"
};
// Create VTable instance
const vtableInstance = new VTable.ListTable(
document.getElementById("container")!,
option
);
在线演示:https://codesandbox.io/s/vtable-widthmode-heightmode-56m24x
列表表演示:https://visactor.io/vtable/demo/table-type/list-table
rowHeight columnWidth 教程:https://visactor.io/vtable/guide/basic_function/row_height_column_width
相关api:https://visactor.io/vtable/option/ListTable#widthMode('standard'%20%7C%20'adaptive'%20%7C%20'autoWidth')%20=%20'standard'
github:https://github.com/VisActor/VTable