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>