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

news2024/12/30 1:45:40

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

  分组表头的配置主要是这个,就是套娃原理,不需要展示数据的直接写个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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2168423.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

实现简易 vuedraggable 的拖拽排序功能

一、案例效果 拖拽计数4实现手动排序 二、案例代码 <draggable:list"searchResult.indicator":group"{ name: indicators }"item-key"field"handle".drag-handle-icon"><divclass"field-item"v-for"(item…

YOLOv8+注意力机制+PyQt5玉米病害检测系统完整资源集合

资源包含可视化的玉米病害检测系统&#xff0c;基于最新的YOLOv8注意力机制训练的玉米病害检测模型&#xff0c;和基于PyQt5制作的可视玉米病害系统&#xff0c;包含登陆页面和检测页面&#xff0c;该系统可自动检测和识别图片或视频当中出现的七类玉米病害&#xff1a;矮花叶病…

Java每日面试题(mysql优化)(day14)

目录 连接查询MySQL常用函数汇总SQL Select 语句的执行顺序数据库三范式MyISAM 存储引擎 与 InnoDB 引擎区别索引索引的优缺点索引的分类索引结构B树与B树的区别索引失效的几种情况 数据库锁MySql 优化 连接查询 MySQL常用函数汇总 SQL Select 语句的执行顺序 数据库三范式 第一…

物联网网络中集中式与分布式SDN环境的比较分析

论文标题&#xff1a;Comparative Analysis of Centralized and Distributed SDN Environments for IoT Networks 中文标题&#xff1a;物联网网络中集中式与分布式SDN环境的比较分析 作者信息&#xff1a; Khirota G. Yalda, Diyar J. Hamad, Nicolae Tapus罗马尼亚布加勒斯…

科研绘图系列:R语言树结构聚类热图(cluster heatmap)

文章目录 介绍加载R包导入数据数据预处理画图修改图形导出数据系统信息介绍 热图结合树结构展示聚类结果通常用于展示数据集中的模式和关系,这种图形被称为聚类热图或层次聚类热图。在这种图中,热图部分显示了数据矩阵的颜色编码值,而树结构(通常称为树状图或聚类树)则显…

【高中数学/函数/零点】求分段函数f(x)=x^2-4x+2(x>=1) f(x)=|lg(1-x)| (x<1)的零点个数

【问题】 已知分段函数f(x)x^22x(当x<0时)&#xff0c;f(x)|lgx|(当x>0时)&#xff0c;则函数g(x)f(1-x)-1的零点个数为几个&#xff1f; 【来源】 《高考数学极致解题大招》P137 变式训练第1题 中原教研工作室编著 【解答】 f(1-x)-10即f(1-x)1 当1-x>0,即x&l…

遍历9个格子winmine!StepBlock和遍历8个格子winmine!StepBox的对决

遍历9个格子winmine!StepBlock和遍历8个格子winmine!StepBox的对决 第一部分&#xff1a;windbg调试记录。 0: kd> g Breakpoint 10 hit winmine!DoButton1Up: 001b:0100390e a130510001 mov eax,dword ptr [winmine!xCur (01005130)] 0: kd> kc # 00 winmine…

基于JAVA+SpringBoot+Vue的健身房管理系统1

基于JAVASpringBootVue的健身房管理系统1 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末附源码下载链接&#x1f345; 哈喽…

element ui中当el-dialog需要做全屏时,.fullscreen样式修改问题

element ui 饿了么UI中el-dialog样式修改问题 场景解决方法就是&#xff1a;去掉底部样式中的scoped,然后再进行页面级样式的更改即可。 场景 最近在使用element-ui时&#xff0c;使用到了弹窗组件&#xff1a; element-ui 官网链接地址&#xff1a; element-ui 官网链接地址…

C语言指针系列1——初识指针

祛魅&#xff1a;其实指针这块儿并不难&#xff0c;有人说难只是因为基础到进阶没有处理好&#xff0c;大家要好好跟着一步一步学习&#xff0c;今天我们先来认识一下指针 指针定义&#xff1a;指针就是内存地址&#xff0c;指针变量是用来存放内存地址的变量&#xff0c;在同一…

Java线程的三大特性

原子性: 线程任务不可再分。 int i 1; i; 原子类 AtomicXXX 可见性: 线程之间的操作是互相不可见的。 volatile //线程A如果&#xff0c;flag为true&#xff0c;就运行打印语句 A: trueThread t1 new Thread(() -> {while (true) {if (flag) {System.out.println(&q…

卷积神经网络-迁移学习

文章目录 一、迁移学习1.定义与性质2.步骤 二、Batch Normalization&#xff08;批次归一化&#xff09;三、ResNet网络1.核心思想2.残差结构&#xff08;1&#xff09;残差块&#xff08;2&#xff09;残差结构类型 四、总结 一、迁移学习 迁移学习&#xff08;Transfer Lear…

zabbix基本概念与组件

文章目录 一、zabbix简介二、​​​​​​​zabbix构成三、​​​​​​​zabbix监控对象四、​​​​​​​zabbix常用术语五、 Zabbix 6.0 新特性1.Zabbix server高可用防止硬件故障或计划维护期的停机2.Kubernetes系统从多个维度采集指标 六、zabbix 工作原理1、主动模式2、…

操作配置笔记

一、检查&#xff1a; 1.查看当前配置 display current-configuration 2.查看路由表 display ip routing-table 3.查看当前配置情况 display this 4.查看当前设备版本 display version 5.查看接口 display interface display ip interface 6.查看保存的当前配置 display sav…

openinstall鸿蒙SDK再升级,功能全面支持HarmonyOS NEXT

万众期待的鸿蒙操作系统HarmonyOS NEXT即将发布&#xff0c;国产自主的全场景智能操作系统诞生&#xff0c;将为生态伙伴共创共享创造新蓝海&#xff0c;鸿蒙生态的加速构建&#xff0c;也有望催生出互联网生态的第三极。 作为首批鸿蒙生态伙伴&#xff0c;openinstall在App渠…

AR 眼镜之-蓝牙电话-来电铃声与系统音效

目录 &#x1f4c2; 前言 AR 眼镜系统版本 蓝牙电话 来电铃声 系统音效 1. &#x1f531; Android9 原生的来电铃声&#xff0c;走的哪个通道&#xff1f; 2. &#x1f4a0; Android9 原生的来电铃声&#xff0c;使用什么播放&#xff1f; 2.1 来电铃声创建准备 2.2 来…

C语言指针系列2——加深理解

大家&#xff0c;今天讲的知识点是一块儿一块儿的&#xff0c;所以大家要好好学习喔~ 话不多说&#xff0c;开始正题 关键字&#xff1a;const &#xff08;三种用法&#xff09; 1. int* const p; 2. int const* p; 3. const int* const p; 首先我们要了解一下const&#xff…

828华为云征文|使用Flexus X实例安装宝塔面板教学

目录 一、Flexus X实例简介 1.1 概述 1.2 产品规格 二、切换操作系统 2.1 Huawei Cloud EulerOS 2.0 标准版 2.2 切换镜像 三、部署宝塔面板 3.1 安装宝塔面板 3.2 放通安全组规则 3.3 登录宝塔面板 四、使用感受 4.1 柔性算力随心配 4.2 一直加速一直快 4.3 越用…

C++之分割字符串的两种方式

方式一 #include <string> #include <vector> #include <sstream> #include <iostream>std::vector<std::string> split(const std::string& str, char delim) {std::stringstream ss(str);std::string item;std::vector<std::string>…

防火墙-CentOS7-firewalld

文章目录 一、防火墙以及Linux防火墙服务介绍什么是防火墙&#xff0c;有什么用防火墙的结构防火墙的作用为什么需要防火墙防火墙何时需要开启防火墙何时可以关闭名词什么是入站&#xff1f;出站 Linux防火墙发展历程1. 初期阶段2. iptables的出现3. 发展与扩展4. nftables的引…