VTable使用问题:如何设置多级表头

192 阅读1分钟

问题标题

如何设置多级表头

问题描述

如何配置表头,实现多级表头分组效果

解决方案

VTable中的column配置中,支持通过columns配置来指定该列的下级表头,可以使用这个规则多级嵌套

代码示例

const columns = [
  {
    field: 'id',
    title: 'ID',
    width: 100
  },
  {
    title: 'Name',
    columns: [
      {
        field: 'name1',
        title: 'name1',
        width: 100
      },
      {
        title: 'name-level-2',
        width: 150,
        columns: [
          {
            field: 'name2',
            title: 'name2',
            width: 100
          },
          {
            title: 'name3',
            field: 'name3',
            width: 150
          }
        ]
      }
    ]
  }
];

const option = {
  records,
  columns,
  // ......
};

结果展示

完整示例:www.visactor.io/vtable/demo…

相关文档

相关api:www.visactor.io/vtable/opti…

github:github.com/VisActor/VT…