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-tablev-elseref="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>