ant design vue组件中table组件设置分组头部和固定总结栏

问题：遇到了个需求，不仅要设置分组的头部，还要在顶部有个统计总和的栏。

  分组表头的配置主要是这个，就是套娃原理，不需要展示数据的直接写个title就行，需要展示数据的字段才需要详细的配置属性。

const columns = [
  {
    title: '',
    children: [
      {
        title: '员工姓名',
        dataIndex: 'name',
        key: 'name',
        width: enums.COLUMNS_WIDTH.NAME,
        align: 'center',
        fixed: 'left',
        ellipsis: true,
      },
    ],
  },
  {
    title: '基础数据',
    children: [
      {
        title: '通话次数',
        dataIndex: 'call_num',
        key: 'call_num',
        width: enums.COLUMNS_WIDTH.NAME,
        align: 'right',
        ellipsis: true,
      },
      {
        title: '通话时长',
        dataIndex: 'call_duration',
        key: 'call_duration',
        width: enums.COLUMNS_WIDTH.NAME,
        align: 'center',
        ellipsis: true,
      },
    ],
  },
  {
    title: '通话表现',
    children: [
      {
        title: '高意向客户数',
        dataIndex: 'intention_level_num',
        key: 'intention_level_num',
        width: enums.COLUMNS_WIDTH.NAME,
        align: 'right',
        ellipsis: true,
      },
      {
        title: '语速过快（通）',
        dataIndex: 'speak',
        key: 'speak',
        width: enums.COLUMNS_WIDTH.NAME,
        align: 'right',
        ellipsis: true,
      },
      {
        title: '说话过多（通）',
        dataIndex: 'talking',
        key: 'talking',
        width: enums.COLUMNS_WIDTH.NAME,
        align: 'right',
        ellipsis: true,
      },
    ],
  },
];

配置固定的合计栏，主要是使用了table中的总结栏。

下面的代码中还有关于自定义单个头部字段的方法使用的是插槽headerCell；

自定义table字段的方法，使用的是插槽bodyCell；没有值的显示--

总结栏是使用的插槽summary，至于里面显示的具体数值，需要自己配置。

<a-table-summary-row>：一行

<a-table-summary-cell>：一列（也可以叫单元格）

<a-table
          v-else
          ref="table"
          rowKey="id"
          bordered
          :loading="loading"
          :pagination="false"
          :scroll="{y: tableTop}"
          size="middle"
          :locale="{
              emptyText: '暂无数据'
            }"
          :columns="columns"
          :data-source="clueList"
        >
          <template #headerCell="{ column }">
            <template v-if="column.dataIndex === 'speak'">
            <span>
              语速过快（通）
              <a-tooltip>
                <template #title>语速过快：按照通话次数统计，销售在此次通话中是否语速过快。</template>
                <QuestionCircleOutlined />
              </a-tooltip>
            </span>
            </template>
            <template v-if="column.dataIndex === 'talking'">
            <span>
              说话过多（通）
              <a-tooltip>
                <template #title>说话过多：按照通话次数统计，销售在此次通话中说话字数超过60%。</template>
                <QuestionCircleOutlined />
              </a-tooltip>
            </span>
            </template>
          </template>
          <template #bodyCell="{ column,record }">
            <template v-if="column.dataIndex==='name'">
              <div style="width: 100%;" @click.stop="goToClueDetail(record)" class="truncated-text">
                <a-tooltip placement="topLeft">
                  <template #title>
                    <span>{{ record?.create_user?.real_name||'-' }}</span>
                  </template>
                  <span>{{ record?.create_user?.real_name||'-' }}</span>
                </a-tooltip>
              </div>
            </template>
            <template v-if="column.dataIndex==='call_num'">
              {{ record.call_record?.call_duration ||'-' }}
            </template>
            <template v-if="column.dataIndex==='call_duration'">
              {{ record.call_record?.call_duration?secondsToHMS(record.call_record?.call_duration) :'-' }}
            </template>
            <template v-if="column.dataIndex==='intention_level_num'">
              {{ record.call_record?.intention_level ||'-' }}
            </template>
            <template v-if="column.dataIndex==='speak'">
              {{ record.call_record?.employee_performance?.speak_num ||'-' }}
            </template>
            <template v-if="column.dataIndex==='talking'">
              {{ record.call_record?.employee_performance?.talking_num ||'-' }}
            </template>
          </template>
          <template #summary>
            <a-table-summary fixed="top">
            <a-table-summary-row>
              <a-table-summary-cell style="text-align: center">合计</a-table-summary-cell>
              <a-table-summary-cell style="text-align: end">
                {{ 16 }}
              </a-table-summary-cell>
              <a-table-summary-cell style="text-align: center">
                {{ '01:08:14' }}
              </a-table-summary-cell>
              <a-table-summary-cell style="text-align: end">
                {{ 259 }}
              </a-table-summary-cell>
              <a-table-summary-cell style="text-align: end">
                {{ 345 }}
              </a-table-summary-cell>
              <a-table-summary-cell style="text-align: end">
                {{ 161 }}
              </a-table-summary-cell>
            </a-table-summary-row>
            </a-table-summary>
          </template>
        </a-table>