当前位置: 首页 > news >正文

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>


http://www.mrgr.cn/news/35923.html

相关文章:

  • 缓存冲突(Cache Conflict)
  • 策略模式、状态机详细解读
  • idea 删除本地分支后,弹窗 delete tracked brank
  • 接口类和抽象类在设计模式中的一些应用
  • 刷算法题(C++)
  • 设计模式之责任链模式(Chain Of Responsibility)
  • _RET_IP_ 和_THIS_IP_ 作用
  • 通信工程高级职称评审条件详细解读
  • Databend 为什么能帮用户降低 90% 成本?
  • 直播平台美颜功能开发方案:基于视频美颜SDK的集成详解
  • mybatis-plus公共字段自动填充fillStrategy()方法和strictFill()方法
  • FTP服务搭建
  • 博科测试IPO上市关注:汽车测试试验业务发展迅速
  • Oracle 相关的工具使用 SQL Developer , sqlplus
  • JAVA输入输出处理技术
  • 2024 Redis 全部
  • Redis结合Caffeine实现二级缓存:提高应用程序性能
  • 【源码+文档+调试讲解】重庆旅游景点数据分析系统python
  • Node-RED-L2-Node-RED在Linux系统启动时自动运行
  • 配置anaconda环境变量的影响
  • YOLOv9改进策略【注意力机制篇】| EMA 即插即用模块,提高远距离建模依赖
  • [半导体检测-2]:了解半导体检测领域的领头羊KLA科磊
  • ROS学习笔记(二):鱼香ROS — 超便捷的一键安装/配置/换源指令(Ubuntu/ROS/ROS2/IDE等)
  • “山不在高”申请商标,看显著性变化!
  • MapStruct 超神进阶用法,让你的代码效率提升十倍!
  • 小程序视频编辑SDK解决方案,轻量化视频制作解决方案