使用VTable表格组件的透视表时，怎么做维度下钻的功能

问题描述

vtable透视表是否支持在前端做钻取交互？

解决方案

配置上这个 有了图标 监听事件（visactor.io/vtable/api/…） 获取新的数据后调用接口updateOption更新完整的配置。

代码示例

具体可以参考官网的示例demo：visactor.io/vtable/demo…

关键的配置drillDown：

const option = {
  records: data,
  rows: [
    {
      dimensionKey: 'Category',
      title: 'Category',
      drillDown: true,
      headerStyle: {
        textStick: true
      },
      width: 'auto'
    }
  ],
  columns: [
    {
      dimensionKey: 'Region',
      title: 'Region',
      headerStyle: {
        textStick: true
      },
      width: 'auto'
    }
  ],
  indicators: ...
};

配置后显示下钻图标，监听图标的点击事件 drillmenu_click，事件处理逻辑中调用updateOption更新配置，配置的下钻图标变成下钻图标drillUp：

tableInstance.on('drillmenu_click', args => {
  if (args.drillDown) {
    if (args.dimensionKey === 'Category') {
      tableInstance.updateOption({
        records: newData,
        rows: [
          {
            dimensionKey: 'Category',
            title: 'Category',
            drillUp: true,
            headerStyle: {
              textStick: true
            },
            width: 'auto'
          },
          {
            dimensionKey: 'Sub-Category',
            title: 'Sub-Catogery',
            headerStyle: {
              textStick: true
            },
            width: 'auto'
          }
        ],
        columns: ...,
        indicators: ...
      });
    }
  }

结果展示

官网示例效果如下：

相关文档

透视表上钻下钻用法教程：visactor.io/vtable/guid…

透视表上钻下钻用法demo：visactor.io/vtable/demo…

相关api：visactor.io/vtable/opti…

visactor.io/vtable/api/…

github：github.com/VisActor/VT…