前端实现表头分组,Vue,Vxe-table

初始模板

<vxe-grid highlight-current-row v-bind="gridOptions"></vxe-grid>

通过vxe-grid标签进行绑定，加上highlight-current-row高亮属性，绑定对应的data样式

      gridOptions: {
        border: true,
        stripe: true,
        resizable: true,
        autoSize: true,
        height: "545px",
        showOverflow: true,
        loading: true,
        isHover: true,
        // 分组列头，通过 children 定义子列
        columns: [],
        data: [],
      },

      cumulative(data).then((response) => {
        if (response.code == 200) {
          this.gridOptions.columns = response.data.columns;
          this.gridOptions.data = response.data.data;
          this.gridOptions.loading = false;
          this.dataLength = response.data.data.length;
        }
      });

通过接口获取对应的data，对数据进行绑定，返回数据格式如下：

 效果示例图：