问题:遇到了个需求,不仅要设置分组的头部,还要在顶部有个统计总和的栏。
分组表头的配置主要是这个,就是套娃原理,不需要展示数据的直接写个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>