百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

antd 的table分析

liuian 2025-02-15 00:06 16 浏览

大家应该都熟悉,antd的组件都是基于rc-*组件开发的,table对应的是rc-table,在antd引入的情况如下图所示



  1. 基本用法
    通过props传递过来的columns和dataSource分别渲染头部thead下的th和内容tbody下的td, 其中dataSource是antd内部有封装方法getCurrentPageData进行分页处理的

主要渲染方式是rc-table文件的table下的getChildContext,返回的是table,在BaseTable下有this.context.table,同时BaseTable获取到了this.context.table信息,在render里通过createElement将元素渲染出来,因为是通过createElement渲染的,所以tableHeader可以是组件ReactElement形式


  1. 选择操作
    通过查看源码发现,选择操作是antd去封装的,不是rc-table

antd下的table文件下有renderRowSelection,通过rowSelection是否为true来判断,会便利列表哪些选中哪些没选中,然后将其unshift到columns上

自定义选项是header有个筛选,rowSelection有selections会渲染,作为selectionColumn的title


  1. 筛选和排序
    这个功能也是antd的,不是rc-table的,具体排序的方法就不详细介绍,主要是toggleSortOrder所示
  1. 紧凑型+带边框
    在antd下添加class,通过css实现,但是title和footer是在rc-table里实现的
  2. 可展开(嵌套子表格可以理解它的一个特例)
    实现主要是在rc-table里实现的,基础icon组件是ExpandIcon,里面包括了基本的render和事件等,在ExpandRow里拼接了class,最后是在baseTable里添加到row里,实现渲染等功能


  1. 表头分组,table单元格的行/列合并的问题
    这个是我自己接触colSpan/rowSpan属性比较少,所以一直以为是通过css样式计算合并的,但一直找不到怎么计算的,后来发现colSpan/rowSpan是td的属性,只要你设置了会自动合并。
    好了,了解了colSpan/rowSpan就知道它是怎么实现的,譬如如果有5列,需要合并前3列,则只需要将第一个的colSpan设置成3,第二个第三个的设置为0(相当于第一个占有1、2、3的位置),合并功能就完成了,是不是很简单(注意,如果你的2、3的colSpan不设置成0的话,它会有7列,并且会被挤出去)
  1. 树形结构(有点没弄明白)
    最里层是用到了TableCell组件,TableRow是引入了TableCell,通过查找属性indentSize,发现是props 传递过来的,发现BaseTable和ExpandableTable均有引入,但通过查看传递的属性,其实是ExpandableTable引入的。


  1. columns中的width 和table中的scroll



9.可编辑,主要是rc-table中,tableRow里接收table传过来components.body.cell,并渲染,渲染的内容是在columns下的onCell中,通过react.createContext交互传递的(需要继续学习react.createContext)


  1. 可拖拽排序
    主要用到React-dnd,然后每行的元素通过components+columns组合,其中下图的BodyCell主要表示的是components,而tdProps是columns传递的属性,通过React.createElement形成dom元素


  1. 可伸缩(同)
    同10,只是采用的是react-resizable实现的,而且我在antd里也没体验出伸缩的感觉。。。。

最后进行下总结,经过对antd table的功能研究,总结了几点要点,如下:
a. 主要功能是rc-table去实现的,antd里的更多的是样式上的统一
b. 所有的功能点组件化(如:TableHeader, TableRow, tableCell),最后在BaseTable里进行组装

c. 每行的内容通过components是可变化的,React.createContext的使用等

d. antd在V4.0.0开始逐步采用react hooks和typescript(接下来需要重点研究的内容)

相关推荐

10种常见的MySQL错误,你可中招?

【51CTO.com快译】如果未能对MySQL8进行恰当的配置,您非但可能遇到无法顺利访问、或调用MySQL的窘境,而且还可能给真实的应用生产环境带来巨大的影响。本文列举了十种MySQL...

MySQL主从如何保证数据一致性

MySQL主从(主备)搭建请点击基于Spring的数据库读写分离。MySQL主备基本原理假设主备切换前,我们的主库是节点A,节点B是节点A的备库,客户端的读写都是直接访问节点A,节点B只是将A的更新同...

MySQL低版本升级操作流程

(关注“数据库架构师”公众号,提升数据库技能,助力职业发展)0-升级背景MySQL5.5发布于2010年,至今已有十年历史,官方已经停止更新。2008年发布的MySQL5.1版本,在2018年...

MySQL数据库知识

MySQL是一种关系型数据库管理系统;那废话不多说,直接上自己以前学习整理文档:查看数据库命令:(1).查看存储过程状态:showprocedurestatus;(2).显示系统变量:show...

Mysql 8.4数据库安装、新建用户和数据库、表单

1、下载MySQL数据库yuminstall-ywgetperlnet-toolslibtirpc#安装wget和perl、net-tools、libtirpcwgethtt...

mysql8.0新功能介绍

MySQL8.0新特性集锦一、默认字符集由latin1变为utf8mb4在8.0版本之前,默认字符集为latin1,utf8指向的是utf8mb3,8.0版本默认字符集为utf8mb4,utf8默...

全网最详细解决Windows下Mysql数据库安装后忘记初始root 密码方法

一、准备重置root的初始化密码Win+R键启动命令输入窗口;输入cmd打开命令执行窗口;##界面如下##输入命令:netstopmysqld#此操作会停止当前运行的...

互联网大厂面试:MySQL使用grant授权后必须flush privilege吗

从我上大学时,数据库概论老师就告诉我,MySQL使用grant对用户授权之后,一定记得要用flushprivilege命令刷新缓存,这样才能使赋权命令生效。毕业工作以后,在很多的技术文档上,仍然可以...

# mysql 8.0 版本无法使用 sqlyog 等图形界面 登录 的解决方法

30万以下的理想L6来了##mysql8.0版本无法使用sqlyog等图形界面登录的解决方法当我们在cmd下登录mysql时正常时,用sqlyog等图形界面连接数据库时却...

MySQL触发器介绍

前言:在学习MySQL的过程中,可能你了解过触发器的概念,不清楚各位是否有详细的去学习过触发器,最近看了几篇关于触发器的文档,分享下MySQL触发器相关知识。1.触发器简介触发器即trigg...

管理员常用的MySQL命令汇总(一)

以下是管理员常用的MySQL命令:以管理员身份连接到MySQL:mysql-uroot-p创建新的MySQL用户:CREATEUSER'username'@'...

Linux(CentOS) 在线安装MySQL8.0和其他版本,修改root密码

一:安装MySQL数据库1),下载并安装MySQL官方的YumRepositorymysql官方仓库地址:https://dev.mysql.com/downloads/repo/yum/选择自...

解决 MySQL 8.0 一直拒绝 root 登录问题

Accessdeniedforuser'root'@'localhost'(usingpassword:YES)这个错误在网上搜一下,能看到非常多的此类...

大模型MCP之MYSQL安装

前言学习大模型的时候需要一个mysql,原因还是在公司使用电脑的时候不允许按照Docker-Desktop,我的宿主机其实是MAC,我习惯上还是在centsos上面安装,就发现这件过去很简单的事情居然...

MySQL ERROR 1396

ERROR1396(HY000):OperationCREATEUSERfailedfor'usera'@'%'问题描述mysql>create...