问题标题

如何让表格只根据表头的内容宽度自动计算列宽

问题描述

在自动宽度模式下，希望一列的宽度只依据表头单元格的内容宽度决定，不受内容单元格影响。

解决方案

VTable提供了columnWidthComputeMode配置，用于指定内容宽度计算时参与计算的限定区域：

• 'only-header'：只计算表头内容。
  
• 'only-body'：只计算 body 单元格内容。
  
• 'normal'：正常计算，即计算表头和 body 单元格内容。
  

代码示例

const options = {
    //......
    columnWidthComputeMode: 'only-header'
};</br>

结果展示

完整示例代码（可以粘贴到 编辑器 上尝试一下）：

let  tableInstance;
  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
    .then((res) => res.json())
    .then((data) => {

const columns =[
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto"
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard',
  columnWidthComputeMode: 'only-header'
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
    })</br>

相关文档

相关api：https://www.visactor.io/vtable/option/ListTable#columnWidthComputeMode
github：https://github.com/VisActor/VTable