antd-vue - - - - - table增加统计行?

news2024/12/23 19:07:12

table增加统计行

  • 尝试一、footer & Summary
    • 使用summary
    • 尝试二、直接将统计行push进dataSource

第一次遇到这个需求,有点懵。
在【antd-v table】官网仔细看了一番,找到这么两个配置footer[表格尾部]Summary[总结栏] 
所以可以证明,你所需要的需求,总有人在为你负重前行!!!

尝试一、footer & Summary

在看到这两个配置项时,就感觉 ‘有救了’ 。
在这里插入图片描述在这里插入图片描述

尝试一番过后,也确实基本实现了所需要的功能(我使用的是Summary)

使用summary

代码如下:
在这里插入图片描述

    const summaryComputed = computed(() => {
    // 获取列数据
     let col = {
       ...tableConfig.columns
     };
     // 将指定列的内容改为 '统计'
     for (const key in col) {
       if (col[key].dataIndex == "TITLE") {
         col[key] = "统计";
       } else if (col[key].dataIndex == "AMOUNT") {
       // 将指定列的值改为统计值
         col[key] = "1,000,000";
       } else {
       // 其余列皆为空
         col[key] = "";
       }
     }
     return col || {};
   });
   

如此基本实现了需要的功能,如图:
在这里插入图片描述
但是我还有另一个需求,就是左侧条件出现复选框列(可参考: antd-vue - - - - - row-selection的使用),这个情况下就错位了,如图:
在这里插入图片描述

不符合需求,只能尝试其他方式。

尝试二、直接将统计行push进dataSource

因为右侧有操作列,统计行不需要
代码如下:
在这里插入图片描述

...
...
      page: 1,
      pageSize: 11, // 默认是11条,为了展示统计行
      dataSource: [],
      columns: [],
      specialRowKey: "" // 统计行 key
...
...
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        tableConfig.selectedRowKeys = selectedRows;
      },
      // 统计行 复选框禁用
      getCheckboxProps: record => ({
        disabled: record[tableConfig.specialRowKey] === "统计", // name为lee的行,禁止选中
        name: `${record[tableConfig.specialRowKey]}`
      })
    };
...
...
...
	 // 获取第一列的key 用来判断是否展示操作列 & check是否禁用
      const specialRowKey = columns[0]?.dataIndex || "";
...
...

如此,完美满足需求!!

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

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

相关文章

TDEngine3.x数据查询及插入调优

一、数据库创建 vgroups 配置 如果不了解vgroup概念,建议到官网查看:TDEngine官网-数据模型和整体架构 从服务端配置的角度,要根据系统中磁盘的数量,磁盘的 I/O 能力,以及处理器能力在创建数据库时设置适当的 vgroups…

Qt编写onvif工具(搜索/云台/预置位/OSD/录像存储)

一、前言 从最初编写这个工具开始的时间算起来,至少5年多,一直持续完善到今天,这个工具看起来小也不小大也不大,但是也是经历过无数个现场的洗礼,毫不夸张的说,市面上能够遇到的主流的厂商的设备&#xff…

【Flutter】如何 Dialog 弹窗设置点击空白处不关闭

文章目录 一、 引言二、 Flutter 中的 Dialog 弹窗1. 默认的 Dialog 行为介绍2. 解释为什么在某些情况下我们需要点击空白处不关闭 Dialog 三、 如何在 Flutter 中设置 Dialog 弹窗点击空白处不关闭1. 展示简单的代码示例2. 详细解释代码的每个部分 四、 一个完整的 Flutter Di…

SpringCloud服务注册与发现组件Eureka(五)

Eureka github 地址: https://github.com/Netflix/eureka Eureka简介 Eureka是Netflix开发的服务发现框架,本身是一个基于REST的服务,主要用于定位运行在AWS域中的中间层服务,以达到负载均衡和中间层服务故障转移的目的。Spring…

迈入大模型时代,多模态AI通用化成未来趋势,景联文科技提供多模态数据集

ChatGPT带来2023年第一个火爆的风口。ChatGPT是人工智能技术驱动的自然语言处理工具,拥有语言理解和文本生成能力。无论是强大的视频脚本、文案、邮件、翻译、代码等内容生成能力,还是语义推理、情绪分析等对话能力,都让大众眼前一亮&#xf…

C++类和对象(继承)

4.6继承 继承是面向对象三大特性之一 有些类与类之间存在特殊的关系,例如下图中: 我们发现,定义这些类时,下级别的成员除了拥有上一级的共性,还有自己的特性。 这个时候我们就可以考虑利用继承的技术,减…

阿里云PAIx达摩院GraphScope开源基于PyTorch的GPU加速分布式GNN框架

作者:艾宝乐 导读 近期阿里云机器学习平台 PAI 团队和达摩院 GraphScope 团队联合推出了面向 PyTorch 的 GPU 加速分布式 GNN 框架 GraphLearn-for-PyTorch(GLT) 。GLT 利用 GPU 的强大并行计算性能来加速图采样,并利用 UVA 来减少顶点和边特征的转换和…

Spring Security Oauth2.1 最新版 1.1.0 整合 gateway 完成授权认证(拥抱 springboot 3.1)

目录 背景 版本 Spring Boot 3.1 Spring Authorization Server 1.1.0官方文档 基础 spring security OAuth2.0 模块构成 授权方式 集成过程 官方demo 代码集成 依赖 授权服务AuthorizationServerConfig配置 重要组件 测试 查看授权服务配置 访问授权服务 授…

AB32VG1:SDK_AB53XX_V061(5)蓝牙BLE测试笔记

文章目录 1.配置工程,重新编译1.1替换链接库libbtstack_dm.a1.2 《config.h》打开编译开关1.3 在 Downloader 里面打开 BLE 开关 2.ABLink(手机APP)控制2.1 app下载2.2 安装后打开,搜索蓝牙Bluetrum:2.3 操作存储卡 3.…

深度学习应用篇-元学习[14]:基于优化的元学习-MAML模型、LEO模型、Reptile模型

【深度学习入门到进阶】必看系列,含激活函数、优化策略、损失函数、模型调优、归一化算法、卷积模型、序列模型、预训练模型、对抗神经网络等 专栏详细介绍:【深度学习入门到进阶】必看系列,含激活函数、优化策略、损失函数、模型调优、归一化…

华为认证 | HCIP-Datacom-Core 考试大纲

01 考试概况 02 考试内容 HCIP-Datacom-Core Technology V1.0考试覆盖数据通信领域各场景通用核心知识,包括路由基础、OSPF、 IS-IS、BGP、路由和流量控制、以太网交换技术、组播、IPv6、网络安全、网络可靠性、网络服务与管理、 WLAN、网络解决方案。 ★路由基础 …

【MySQL 函数】:一文彻底搞懂 MySQL 函数(一)

前言 ✨欢迎来到小K的MySQL专栏,本节将为大家带来MySQL字符串函数和数学函数的讲解✨ 目录 前言一、字符串函数二、数学函数三、总结 一、字符串函数 函数作用UPPER(列|字符串)将字符串每个字符转为大写LOWER(列|字符串)将字符串每个字符转为小写CONCAT(str1,str2,…

阿里云企业邮箱购买流程

阿里云企业邮箱购买流程,企业邮箱分为免费版、标准版、集团版和尊享版,阿里云百科分享企业邮箱版本区别,企业邮箱收费标准价格表,以及阿里企业邮箱详细购买流程: 目录 阿里云企业邮箱购买流程 一、阿里云账号注册及…

OpenAI 刚刚宣布了海量更新

OpenAI 刚刚宣布了海量更新,增加函数调用,支持更长上下文,价格更低! ​新模型上架 1、gpt-4-0613 2、gpt-4-32k-0613 3、gpt-3.5-turbo-0613 4、gpt-3.5-turbo-16k 部分模型降价 1、text-embedding-ada-002:$0.00…

DevExpress WinForms功能区组件,让业务应用创建更轻松!(上)

DevExpress WinForms的Ribbon(功能区)组件灵感来自于Microsoft Office,并针对WinForms开发人员进行了优化,它可以帮助开发者轻松地模拟当今最流行的商业生产应用程序。 PS:DevExpress WinForm拥有180组件和UI库&#…

Linux安装SQLServer数据库

Linux安装SQLServer数据库 文章目录 Linux安装SQLServer数据库SQLServer是什么SQLServer的安装安装要求安装步骤安装配置安装命令行工具 SQLServer是什么 美国 Microsoft 公司推出的一种关系型数据库系统。SQL Server 是一个可扩展的、高性能的、为分布式客户机/服务器计算所设…

[PostgreSQL-16新特性之EXPLAIN的GENERIC_PLAN选项]

随着PostgreSQL-16beta1版本的发布,我们可以发现,对于我们时常使用的explain增加了一个GENERIC_PLAN选项。这个选项是允许了包含参数占位符的语句,如select * from tab01 where id$1;等等这种语句,让其生成不依赖于这些参数值的通…

两个HC-05蓝牙之间的配对

两个HC-05蓝牙之间的配对 文章目录 两个HC-05蓝牙之间的配对1.进入AT指令模式后,先确定是否为AT模式:2.获取模块A,B的地址3.将蓝牙A配置为主模式,将蓝牙B配置为从模式:4.设置模块通信波特率,蓝牙模块A和B的配置需要相同6.验证 买了…

目标检测数据集---玻璃瓶盖工业缺陷数据集

✨✨✨✨✨✨目标检测数据集✨✨✨✨✨✨ 本专栏提供各种场景的数据集,主要聚焦:工业缺陷检测数据集、小目标数据集、遥感数据集、红外小目标数据集,该专栏的数据集会在多个专栏进行验证,在多个数据集进行验证mAP涨点明显,尤其是小目标、遮挡物精度提升明显的数据集会在该…

儿童遗留监测成为「加分项」,多种技术路线「争夺战」一触即发

儿童遗留密闭车内,温度可以在短短15分钟内达到临界水平,从而可能导致中暑和死亡,尤其是当汽车在太阳底下暴晒。 按照Euro NCAP给出的指引,与车祸相比,儿童因车辆中暑而死亡的情况较少,但却是完全可以避免的…