Question

我在VueJs项目中使用的是农业电网企业v21.2.x。我有一个数据透视表，如下图所示。我想隐藏数据透视表中的记录数。

我尝试了https://stackoverflow.com/a/48912864/4050261中针对版本16的解决方案；但这没用。

模板

<template>
  <v-app>
    <v-container fluid class="grey lighten-3">
      <ag-grid-vue
        style="width: 100%; height: 600px"
        class="ag-theme-balham mt-3"
        id="myGrid"
        :gridOptions="gridOptions"
        @grid-ready="onGridReady"
        :defaultColDef="defaultColDef"
        :columnDefs="columnDefs"
        :pivotMode="true"
        :rowGroupPanelShow="rowGroupPanelShow"
        :pivotPanelShow="pivotPanelShow"
        :pivotColumnGroupTotals="pivotColumnGroupTotals"
        :pivotRowTotals="pivotRowTotals"
        :autoGroupColumnDef="autoGroupColumnDef"
        :sideBar="true"
        :rowData="rowData"
      ></ag-grid-vue>
    </v-container>
  </v-app>
</template>

脚本

<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-enterprise";
import { LicenseManager } from "ag-grid-enterprise";
LicenseManager.setLicenseKey(process.env.VUE_APP_AG_KEY);
import axios from "axios";

export default {
  components: {
    "ag-grid-vue": AgGridVue
  },
  data() {
    return {
      // Functional
      workDoneObj: [],
      workDtFrom: this.dayjs()
        .startOf("month")
        .format("YYYY-MM-DD"),
      workDtTo: this.dayjs().format("YYYY-MM-DD"),
      // UI
      menuWorkDtTo: false,
      menuWorkDtFrom: false,
      errMsg: "",
      rfItems: [
        { text: "Auto", value: null },
        { text: "My", value: 0 },
        { text: "My Team", value: 2 },
        { text: "All", value: 1 }
      ],
      rf: 0,
      // Ag Grid
      gridOptions: null,
      gridApi: null,
      columnApi: null,
      defaultColDef: null,
      columnDefs: null,
      rowGroupPanelShow: null,
      pivotPanelShow: null,
      pivotColumnGroupTotals: null,
      pivotRowTotals: null,
      autoGroupColumnDef: null,
      rowData: null
    };
  },
  computed: {
    workDtFromFormatted() {
      return this.dayjs(this.workDtFrom).format("DD MMM YYYY");
    },
    workDtToFormatted() {
      return this.dayjs(this.workDtTo).format("DD MMM YYYY");
    }
  },
  methods: {
    async onGridReady() {
      const { data: resp } = await axios.post("/task/workdoneag", {
        dtfrom: this.workDtFrom,
        dtto: this.workDtTo,
        rf: this.rf
      });
      if (resp.success == true) {
        this.rowData = resp.data;
      }
    },
    numberFormatter({ value }) {
      return ~~value;
    }
  },
  beforeMount() {
    this.gridOptions = {};
    this.defaultColDef = {
      resizable: true,
      filter: true,
      width: 100
    };
    this.columnDefs = [
      {
        headerName: "Task Name",
        field: "taskname",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Task Status",
        field: "taskstatus",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Task Completion",
        field: "tskcompletion",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Work Category",
        field: "w_category",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Work Description",
        field: "workdescp",
        enableRowGroup: true
      },
      {
        headerName: "Work Date",
        field: "workdate",
        enablePivot: true,
        enableRowGroup: true,
        type: "dateColumn"
      },
      {
        headerName: "User Name",
        field: "username",
        rowGroup: true,
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Service Name",
        field: "tasklistname",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Service Type",
        field: "servicetype",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Year",
        field: "compyear",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Period",
        field: "compperiod",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Client No",
        field: "clientno",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Client Name",
        field: "clientname",
        rowGroup: true,
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Task Category",
        field: "t_category",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Task ProfitCenter",
        field: "t_pcenter",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Task CostCenter",
        field: "t_ccenter",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Client Category",
        field: "c_category",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Client ProfitCenter",
        field: "c_pcenter",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Client CostCenter",
        field: "c_ccenter",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Group Category",
        field: "g_category",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Group ProfitCenter",
        field: "g_pcenter",
        enablePivot: true,
        enableRowGroup: true
      },
      {
        headerName: "Group CostCenter",
        field: "g_ccenter",
        enablePivot: true,
        enableRowGroup: true
      },

      // sum one
      {
        headerName: "Spent Hours",
        field: "spenthours",
        aggFunc: "sum",
        type: "numericColumn",
        valueFormatter: this.numberFormatter
      }
    ];
    this.rowGroupPanelShow = "always";
    this.pivotPanelShow = "always";
    this.pivotColumnGroupTotals = "after";
    this.pivotRowTotals = "before";
    this.autoGroupColumnDef = { width: 300 };
  },
  mounted() {
    this.gridApi = this.gridOptions.api;
    this.gridColumnApi = this.gridOptions.columnApi;
  }
};
</script>

CSS

<style lang="sass">
  @import "../../node_modules/ag-grid-community/dist/styles/ag-grid.css"
  @import "../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css"
</style>

Answer 1

来自documentation：

通过设置autoGroupColumnDef.cellRendererParams.suppressCount = true
删除每个组的计数

在beforeMount()中，将autoGroupColumnDef分配替换为此：

this.autoGroupColumnDef = {
      width: 300,
      cellRendererParams: {
        suppressCount: true
      }

在数据透视模式下隐藏Ag-Grid中的记录数

1 个答案: