Table,是antd中一个我们经常使用的组件,在官方文档中给出了非常详细的实例以及API, 但在我们在使用过程中可能需要根据项目的要求来定制空状态时的展示. 什么是空状态呢? 在antd的官方文档中他是这么说的 当目前没有数据时,用于显式的用户提示. 初始化场景时的引导创建流程. 我们需要做的就是要自定义Table的 Empty(空状态),但是在查询官方文档的过程中,我们并没有发现Table组件提供修改Empty的相关接口,它直接使用了antd全局默认的空状态. 虽然Table没有提供直接修改

示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park', tags: ['nice', 'developer'], }, { key: '1', name: 'John Brown', age: 42, address: 'London No. 1 Lake Park', tags: ['loser'], }, { key: '2', name: 'J

一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级表示的是应用,这是table的最左边的数据.然后是按钮的数据,这里显示在table的头部. 二.效果图如下 三.具体代码 1.RoleApplicationTable.js import React from 'react'; import RoleCheckbox from 'components

废话不多说,直接上代码.一目了然. import React, { Component } from "react"; import { Table } from "antd"; import PropTypes from "prop-types"; class TableBar extends Component { constructor(props) { super(props); this.onScrollEvent = this.onS

封装组件是为了能在开发过程中高度复用功能和样式相似的组件,以便我们只关注于业务逻辑层的处理,提高开发效率,提高逼格,降低代码重复率,降低劳动时间,减少加班的可能. 本次组件的封装采用了函数式组件即无状态组件的方式来提高页面渲染性能,由于无状态组件在数据变更后不会主动触发页面的重新渲染,所以本次的封装也用到了React Hooks.下面简要介绍一下函数式组件和React Hooks. 函数式组件是被精简成一个render方法的函数来实现的,由于是无状态组件,所以无状态组件就不会再有组件实例化的过程

一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1.若列头与内容不对齐或出现列重复,请指定固定列的宽度 width.如果指定 width 不生效,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局. 2.建议指定 scroll.x 为大于表格宽度的固定值或百分比.注意,且非固定列宽度之和不要超过 scroll.x. 如果按照

首先项目是尚硅谷的后台谷粒平台,在用到antd Table 中的 rowSelection时,出现了一个问题(P87时遇到的问题): 表格中的每一项前面有一个radio单选框可以选中,本来是想利用rowSelection来选择行时就可以选中该单选框(见下图) 但是会发现有一个bug,就是此时移到角色旁边的单选框,鼠标变为触手时,再点击却无任何反应,见下图: 经过一系列的查找文档和百度,最终发现为rowSelection配置了selectedRowKeys属性而没有配置onChange导致的, 在

使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, /*翻页查询*/ pageSize:10, /*分页查询*/ activePage: 1, /*默认显示一页*/ selectedRowKeys: [], // 这里配置默认勾选列 loading: false, /*antd*/ selectedRow:[] } 在制作过程中,根据需要把antd的

今天折腾了半天,各种安装问题,最终还是装上了: 1.安装npm $ sudo apt install npm 2.升级npm $ sudo npm install npm@latest -g 输入npm -v,即可看到当前npm的版本号,说明安装成功了. 3.安装用于安装nodejs的模块n $ sudo npm install -g n 4.n模块安装指定版本的nodejs //安装官方最新版本 $ sudo n latest //安装官方稳定版本 $ sudo n stable //安装官方

效果: 代码: import React from 'react'; import { Table } from 'antd'; import DatePicker1 from './DatePicker'; const pieArrs = [ {place_id: 3}, {place_id: 3}, {place_id: 3}, {place_id: 3}, {place_id: 3}, {place_id: 3}, {place_id: 3}, {place_id: 3}, {place_

form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等等都大同小异.大差不差且表单的功能基本相似,所以很有必要对这些表单来一个简单的封装. 其实,封装组件的意义我们在上一篇封装react antd的表格table组件中已经介绍过了,这里不再做过多的描述了,且在"封装react antd的表格table组件"一文中,我们也对相关技术作了简要介绍

上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等.至于为何要把上传组件封装成一个公共的.可复用的组件,在前两篇文章封装react antd的form表单组件.封装react antd的表格table组件中已经作了很多介绍,这里同样不再赘述. 有朋友觉得这些功能组件在各种前端框架满天飞的今天都大同小异.大差不差,甚至觉得Level有点Low.哈哈,其实事实也确实是这样

React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始接触react一窍不通,到慢慢的似懂非懂,通过各种途径学习也有一阵了.学习过程中还会接触到很多新的东西,比如ES6.webpack,过程艰辛谁人懂,见坑填坑慢慢来.今天把学习过程过滤了一下,只说项目实际需要用的东西,总结了一套能看到的东西,分享给大家,希望能让读者少踩一些坑! 本文看点 实际项目效果

工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017/03/20/1490020310263.html http://www.jqhtml.com/7626.html

第一次尝试React+antd,发现果然不愧是传说中的坑货,一个又一个坑.必须要记录. react + antd,都是最新版本,使用npm和yarn各种add,build,start 1. 资源文件,图片文件,路径在build之后会不能用 我们希望的是http://xxxxxxx/AAA/img/XX.png 但build之后给出的是http://xxxxxxx/static/media/XX.png 解决方案: node_modules -> react-scripts -> config

最近在公司做React+antd的项目,遇到一个上传组件的问题,即上传附件成功后,文件展示处仍然还有之前上传附件的缓存信息,需要解决的问题是,要把上一次上传的附件缓存在上传成功或者取消后,可以进行清除 经过一顿试错,终于解决了这个问题. showUploadList,是可选参数,即是否展示uploadList,默认是开启的,showUploadList:true即为展示,效果是当附件上传成功后,会在页面上显示出上传的附件名字记录,如上图所示. 需要解决的问题是:在有上传按钮的弹出框里,当上传附件

typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影响到antd的显示 // allowSyntheticDefaultImports 是antd官网给的配置 必须加上 { "compilerOptions": { "outDir": "./dist/", "sourceMap":

webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还在一步步走来,学习了很多.那时候还不会配置,直接从网上下了别人配置好的可以跑的.之后特意花了一段时间好好研究了下webpack,后面可以直接动手做一些基本的配置.webpack很强大,还有许多要学习的地方. 最近学习了挺多知识,堆积着没有记录到博客.找机会慢慢写出,因工作需要,最近干了后端,毕竟是前

版本:[ "JYadmin-react-antd": "^1.0.0"] 版权所有:微信公众号[微新悦] 原文链接:https://www.weixinyue.cn/frontCourses/#/JYAdminReactAntd1.0/1(阅读效果更佳)  文章说明:本课题会带大家从零到一打造一套基于react+antd封装的优秀后台模板集成方案   第一节:[react+antd 基础框架搭建(登录)]   第一步:使用create-react-app脚手架创建一

背景 ​ 最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构.代码规范.请求封装等等, 涉及内容较多,所以我分成了几个部分来记录搭建的过程: 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇) 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(引入redux) 从0到1用react+antd+re

一.事情的起因 最近在做的项目中有大量的表格,正常的表格高度是没有限制的,数据量很大的时候会出现表格内容以及分页信息超出可视窗口, 为了查看超出的部分就需要滚动页面但是这样就会把查询条件等信息滚出可视窗口 滚动后的页面: 而产品经理又想要把所有信息都同时展现在页面中.这样就需要给表格内容设置一个固定的高度,怎么实现呢? 二.Table scroll 属性的应用 这个还是比较简单实现的,因为antd Table 有一个属性scroll: <Table className="component