首页 > 其他分享 >WHAT - Table 表格组件系列(一)

WHAT - Table 表格组件系列(一)

时间:2024-08-06 14:59:04浏览次数:8  
标签:WHAT pro ant design components antd 组件 Table

目录

前言

Table 可以说是很多业务系统最重要的一个开发场景。在很多组件库,对于 Table 组件的封装高度完善。

今天我们将开始通过 antd 的 Table 组件和 antd ProComponents 的 ProTable 组件来进行学习。

antd vs antd ProComponents

体验

  1. antd:https://ant-design.antgroup.com/index-cn
  2. @ant-design/pro-components:https://procomponents.ant.design/

ProComponents 简介 中我们可以认识到

  1. ProComponents 理念
  2. ProComponents 设计思路
    • 一个状态+一系列行为
    • 一个组件≈一个页面
    • 设计与样式

具体来说,ProComponents 高度封装了如下场景的实现:

  • ProLayout + ProTable:列表页
  • ProLayout + ProForm:编辑页
  • ProLayout + ProDescriptions:详情页

可以看到 ProTable 赫然在列。

区别

@ant-design/pro-components 和 antd 之间的差异主要体现在它们的设计和用途上:

  1. 设计定位:
  • antd(Ant Design):antd 是 Ant Design 团队提供的一个基于 React 的 UI 组件库,旨在提供一套美观、易用且功能丰富的 UI 组件,适用于各种 Web 应用开发场景。
  • @ant-design/pro-components:@ant-design/pro-components 则是 Ant Design 团队推出的专门为企业级应用场景设计的高级组件库。它提供了一些功能更为复杂、面向管理后台和业务应用的组件,帮助开发者快速搭建和开发复杂的管理系统。
  1. 组件范围:
  • antd:antd 包含了丰富的通用 UI 组件,例如按钮、表单、表格、对话框、菜单等,覆盖了大多数常见的前端开发需求。
  • @ant-design/pro-components:@ant-design/pro-components 主要集中在构建管理型后台应用时常用的高级组件,例如高级表格(ProTable)、高级表单(ProForm)、页面容器(PageContainer)、描述列表(Descriptions)、统计卡片(StatisticCard)等,这些组件通常具有更复杂的功能和更强的定制能力,适合于需要处理大量数据和复杂业务逻辑的场景。
  1. 定制和扩展性:
  • antd:antd 提供了丰富的定制能力,开发者可以根据需求对组件进行样式和行为上的调整。
  • @ant-design/pro-components:@ant-design/pro-components 更注重在设计上满足企业级应用的需求,因此其组件往往具有更多的配置选项和扩展点,以支持更灵活和复杂的业务场景。
  1. 侧重点:
  • antd:侧重于通用的 UI 组件,适用于各种类型的 Web 应用开发。
  • @ant-design/pro-components:侧重于企业级管理系统的需求,提供了更多针对性的高级组件和解决方案,帮助开发者提升开发效率和用户体验。

综上所述,@ant-design/pro-components 相对于 antd 更专注于复杂的企业级管理系统的需求,提供了更多高级和定制化的组件,而 antd 则更广泛地服务于通用的前端开发场景。选择使用哪个取决于你的项目需求和开发的具体场景。

antd Table

https://ant.design/components/table-cn#table

antd ProTable

https://procomponents.ant.design/components/table

标签:WHAT,pro,ant,design,components,antd,组件,Table
From: https://blog.csdn.net/weixin_58540586/article/details/140955948

相关文章

  • 【微信小程序实战教程】之微信小程序核心组件详解
    微信小程序核心组件组件化开发并不是小程序所特有的,一些其他编程语言中都有组件化的概念,准确来讲,只有UI视图层的展示,就必定要用到组件化。组件是UI视图层的最基本组成单元,组件中包含了一些基础功能和基础样式,一个组件就类似于一个自定义的标签。小程序框架为开发者提供了......
  • MyBatis-Pager: 一个轻量且优雅的 MyBatis 分页组件
    优点无侵入:仅需在mapper层接口中增加Pager<T>参数即可。零配置:无需额外增加配置项,能够自动推断数据库分页方言。使用方法SpringBoot2项目引入maven依赖<dependency><groupId>cn.codest</groupId><artifactId>mybatis-pager-spring-boot2-starter</art......
  • 鸿蒙UI系统组件15——画布(Canvas)
    如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!扫描下方名片,关注公众号,公众号更新更快,同时也有更多学习资料和技术讨论群。⭐️ 概 述      前一章我们学习了Shape绘制来绘制自定义形状,在实际的业务开发中,有可能我们需要绘制更复杂的图形,例如统计图中的饼图、......
  • Hashtable工具类 - C#小函数类推荐
          此文记录的是一个Hashtable的增强版本,以前没泛型的时候笔者喜欢用Hashtable,性能刚刚的。/***Hashtable工具类AustinLiu刘恒辉ProjectManagerandSoftwareDesignerE-Mail:[email protected]:http://lzhdim.cnblogs.comD......
  • UITableView的原理——探究及重新实现代码
    转自简书,原文地址,本文主要探讨一些特殊细节,像视图重用这类最基本的原理可在源码里查看。先前重新实现了一个list容器视图,由于Apple没有开源,在此分享过程中探索到的UITableView一些细节。MPTableView:AlistviewlikeUITableView,morefast,morefeatures.1·捉摸不定的con......
  • React与Electron与ts一些组件配置与交互遇到的问题
    React同vue一样都是组件化的,React更加的复杂多变,当我们需要改变页面中的内容时不仅仅要在直接关联的布局页面进行修改,步骤大致如下:在当前直接布局页面中增加布局组件函数,比如:renderRightView(){//TODORV++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++re......
  • AI绘画最强SD(Stable Diffusion)玩法实操教学案例及商业变现项目分享
    AI绘画现在越来越火爆了,很多人无论大人小孩都在玩,还有的很多电商老板也在使用辅助生成产品主图和详情页,可以说是非常的实用。而其中最让人追捧和好评的就是SD(StableDiffusion)这款AI绘图软件了,StableDiffusion是一款基于深度学习的图像生成工具,它可以根据文本描述生成高质......
  • 【Vitepress系列】-- 自定义组件及布局,配置tailwindcss、配置Markdown
    Vitepress自定义页面,以及配置tailwindcssvitepress中,除了使用一些配置项目,还可以通过写vue代码,来做一个定制化的UI。下面这个UI主页便是vue组件+tailwindcss做的一.自定义vitepress中,如果内置的home、doc、page不满足需求,还可以自己写vue代码进行自定义1.1自定义布......
  • el-table单选2
    <template> <el-table ref="singleTable" :data="tableData" tooltip-effect="dark" style="width:100%" @select="rowSelect" > <el-table-columntype="selection"width="......
  • 我用AI绘画Stable Diffusion设计建筑户型图,速度又快画的又好!AI打工不惧内卷了!
    大家好,我是程序员晓晓户型图设计是地产公司的常规工作,逐个房间填色摆放家具,忙忙碌碌一天才能完成一个户型,现在用我总结的AI设计工作流程,只要5分钟!现在普通人也能从事户型图设计工作。今天我们通过一个具体的工程案例,一起使用AI绘图工具快速精通户型图设计工作流程。我们先......