table表格 如何加卡片 实现?

实现非常简单 

代码

 const columnsinsu = [{dataIndex: 'nowdate',key: 'nowdate',render: (text, record) =><Cardhoverablestyle={{width: '97%',height: 90,}}// cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}><div style={{ 'display': 'flex' }}><div style={{ 'borderRight': '1px solid lightgray', 'textAlign': 'center', 'width': '12%' }}><h3><BarChartOutlined style={{ 'color': '#409EFF' }} />{text}</h3></div><div><div style={{ 'textAlign': 'center', 'borderRight': '1px solid lightgray', 'marginLeft': '30px', 'width': '100%' }}>公司社保金额<h3>{record.gr_social}</h3></div></div><div><div style={{ 'textAlign': 'center', 'borderRight': '1px solid lightgray', 'marginLeft': '30px', 'width': '100%' }}>个人社保金额<h3>{record.gr_social}</h3></div></div><div><div style={{ 'textAlign': 'center', 'borderRight': '1px solid lightgray', 'marginLeft': '30px', 'width': '100%' }}>参保人数<h3>{record.staff_num}</h3></div></div><div><div onClick={() => { insurRow(record) }} style={{ 'textAlign': 'right', 'marginLeft': '330px' }}>查看凭证</div></div></div></Card>},

这个对象是 table表格的 标题   render渲染的是表格的内容   不加render的话里面的key和dataindex就是 table表格中的内容  render 加上标签 的话可以说是覆盖key  和dataindex

的渲染内容 

 

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

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

相关文章

浅析安全用电监控系统在工厂的研究与应用论述

摘 要&#xff1a;随着社会时代的发展&#xff0c;人们的安全意识越来越强烈&#xff0c;在人们生活和工作中离不开各种用电设备&#xff0c;用电设备的安全使用是保障人们生命安全的重要内容。工厂因自身厂内工作环境的特殊性&#xff0c;用电设备的种类多且复杂&#xff0c;如…

指针的奥秘(二):指针与数组的联系+字符指针+二级指针+指针数组+《剑指offer》笔试题

指针 一.指针与数组的联系1.数组名的理解2.使用指针访问数组3.一维数组传参的本质 二.字符指针1.字符指针隐藏秘密2.常量字符串3.《剑指offer》笔试题 三.二级指针四.指针数组1.指针数组模拟二维数组 一.指针与数组的联系 1.数组名的理解 也许大部分人认为数组名就是一个名称&…

TL-WN826N无线网卡连接电脑蓝屏,提示rtl8188gu.sys

TL-WN826N无线网卡插电脑就蓝屏&#xff0c;提示rtl8188gu.sys 处理方法&#xff1a; 设备管理器中卸载其他的2.0无线网卡程序和功能中卸载网卡驱动TPlink官网下载 TL-WN826N V1.0_1.0.0&#xff08;https://www.tp-link.com.cn/product_572.html?vdownload&#xff09;&…

【Linux】项目自动化构建工具make/makefile

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; Linux &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解Linux中项目自动化构建工具make/makefile的相关内容。 如果看到最后…

【知识碎片】2024_05_09

本篇记录了关于C语言的一些题目&#xff08;puts&#xff0c;printf函数的返回值&#xff0c;getchar&#xff0c;跳出多重循环&#xff09;&#xff0c;和一道关于位运算的代码&#xff3b;整数转换&#xff3d;。 C语言碎片知识 如下程序的功能是&#xff08; &#xff09; #…

从古代故事中领悟高情商回话

页面 页面代码 <% layout(/layouts/default.html, {title: 故事管理, libs: [dataGrid]}){ %> <div class"main-content"><div class"box box-main"><div class"box-header"><div class"box-title">&l…

FPGA+MCU+SDRAM方案,用于服装厂生产过程中以及设计过程中制作样板,剪裁布料

FPGAMCUSDRAM方案&#xff0c;用于服装厂生产过程中以及设计过程中制作样板&#xff0c;剪裁布料 客户应用&#xff1a;服装厂制衣 主要功能&#xff1a; 1.支持步进电机、直流电机 2.支持同时3轴电机协调工作 3.支持以太网/USB联机控制 4.支持LCD 屏显示状态 5.支持HP11/…

Rust多线程交叉打印+Send Sync特征讲解

导航 Rust多线程交叉打印Send Sync特征讲解 一、Rust多线程交叉打印二、Send Sync 特征讲解 Rust多线程交叉打印Send Sync特征讲解 一、Rust多线程交叉打印 先说背景有两个线程&#xff0c;分别为0号线程和1号线线程两个线程交叉打印共享值&#xff0c;并将共享值1当标志为fa…

制鞋5G智能工厂数字孪生可视化平台,推进行业数字化转型

制鞋5G智能工厂数字孪生可视化平台&#xff0c;推进行业数字化转型。随着科技的飞速发展&#xff0c;5G技术与智能制造的结合正成为推动制鞋行业数字化转型的重要力量。制鞋5G智能工厂数字孪生可视化平台&#xff0c;不仅提高了生产效率&#xff0c;还优化了资源配置&#xff0…

2024.5.9 作业 xyt

1. 创建一对父子进程&#xff1a; 父进程负责向文件中写入 长方形的长和宽 子进程负责读取文件中的长宽信息后&#xff0c;计算长方形的面积 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <unistd.h> #include <…

从0开始linux(2)——热键、如何查阅手册

欢迎来到博主的专栏——从0开始linux 博主ID&#xff1a;代码小豪 博主使用的linux发行版&#xff1a;CentOS 7.6 文章目录 热键[Tab]热键Ctrl cshift[pageup]和[pagedown] 查阅手册\-\-help在线手册maninfo手册 热键 我们的命令行模式中存在很多的组合热键&#xff0c;这些按…

������森林消防泵:特点及使用场景 /恒峰智慧科技������

在大自然的怀抱中&#xff0c;森林是地球上最美丽的绿色家园。然而&#xff0c;森林火灾却时常威胁着这片美丽的家园。为了保护森林&#xff0c;我们有幸拥有了一支强大的森林消防泵队伍。今天&#xff0c;就让我们一起来了解一下这些守护者们的故事吧&#xff01; &#xfffd…

电脑ip地址设置成什么比较好

随着信息技术的快速发展&#xff0c;IP地址已成为电脑在网络世界中的“身份证”。它不仅是电脑在网络中进行通信的基础&#xff0c;也直接关系到网络连接的稳定性、安全性和效率。然而&#xff0c;面对众多IP地址设置选项&#xff0c;许多用户可能会感到困惑。那么&#xff0c;…

JavaWeb中的Session和Cookie

前言 什么是会话跟踪技术 Cookie 1.什么是cookie 2.Cookie的应用 2.1 保持用户登录状态 2.2 记录用户名 3. Cookie的设置和获取 3.1 、通过HttpServletResponse.addCookie的方式设置Cookie 3.2、浏览器中查看cookie的内容 3.3、服务端获取客户端携带的cookie&#xf…

华为eNSP学习—IP编址

IP编址 IP编址子网划分例题展示第一步:机房1的子网划分第二步:机房2的子网划分第三步:机房3的子网划分IP编址 明确:IPv4地址长度32bit,点分十进制的形式 ip地址构成=网络位+主机位 子网掩码区分网络位和主机位 学此篇基础: ①学会十进制与二进制转换 ②学会区分网络位和…

FPGA+海思ARM方案,可同时接收HDMI/VGA 两种信号,远程控制

FPGA海思ARM方案&#xff0c;可同时接收HDMI/VGA 两种信号&#xff0c;通过配置输出任一图像或者拼接后的图像 客户应用&#xff1a;无线远程控制 主要特性&#xff1a; 1.支持2K以下任意分辨率格式 2.支持H264压缩图像 3.支持WIFI/4G无线传输 4.支持自适应输入图像分辨率 …

光端机(2)——光纤通信学习笔记九

学习笔记里面只关注基本原理和概念&#xff0c;复杂的公式和推导都没有涉及 光端机 光发射机 作用&#xff1a;实现电光转换。将来自电端机的电信号对光源发出的光波进行调制&#xff0c;然后将调制好的光信号耦合到光线中传输。 基本性能要求 1.合适的发光波长&#xff08;光…

GDAL:Warning 1: All options related to creation ignored in update mode

01 警告说明 首先贴出相关代码&#xff1a; out_file_name Rs_{:4.0f}{:02.0f}.tiff.format(year, month) out_path os.path.join(out_dir, out_file_name) mem_driver gdal.GetDriverByName(MEM) mem_ds mem_driver.Create(, len(lon), len(lat), 1, gdal.GDT_Float32) …

限时优惠||新算法转让(一种基于数学的元启发式算法)新的群智能算法转让,新的元启发式算法转让(独家发售)【仅售1份】

新算法 ||新算法转让、新的元启发式算法转让 ||一种基于数学开发的超隐喻的元启发式算法新算法 限时发售、限量1份 1️⃣完整的封装代码 2️⃣配套完整的灵感及数据 3️⃣测试集&#xff08;3个&#xff09; &#xff08;1&#xff09;cec2017&#xff08;10、30、50和100维&a…

HashMap前世今生

概述 HashMap是我们常用的一种数据结构&#xff0c;他是一个key-value结构。我们来深入了解一下。 1.8之前用的数组加链表 1.8之后用的数组加链表加红黑树&#xff0c;当链表数量大于8时&#xff0c;将链表转为红黑树。当红黑书节点小于6又会转为链表。 浅析HashMap的put()方…