react antd实现竖向表头表格

平时大多做的表格都是横向表头的表格，突然有一次需求是竖向表头的表格，之后发现了Descriptions这个组件,这个组件的名称是描述列表，一开始都没想到这个会跟表格有关系

实现的竖向表头表格

代码如下

<div style={{ width: 500 ,border:'1px green solid',marginTop:'20px',padding:'20px'}}><Descriptions title="竖向表头表格" bordered column={2}><Descriptions.Item label="姓名">张三</Descriptions.Item><Descriptions.Item label="年龄">22</Descriptions.Item><Descriptions.Item label="籍贯">YES</Descriptions.Item><Descriptions.Item label="联系地址">噔噔蹬蹬对对对</Descriptions.Item></Descriptions>
</div>

column是控制每行描述列的数量，默认是3

react antd实现竖向表头表格相关推荐

react antd 更改table 表头和表行样式
我这里以组件的形式来提供code 使实例正确运行至少需要以下知识: 1 创建react项目(本实例基于react项目) 2 知道如何导入和调用组件样式效果如下图: 实现方法目录结构: YMColl ...
React + antd导入表格
引入 import { Button, Upload , message} from 'antd' 导入 // 导入excel表格 getImport = () =>{let _that = t ...
vue有纵向和横向表头表格
github源码地址:https://github.com/zhjing1019/moreTreeTable 使用方法一.下载该组件 npm install more-tree-table 在mai ...
React+Antd+TypeScript 开发规范
React+Antd+TypeScript 规范整合 1.TypeScript代码标准化规则提取出部分适用于项目中的官方要求的的TypeScript用于约束贡献者的编码规范 [typescript官 ...
antd表格显示分页怎么取消_react antd分页后，表格筛选后不能触发重新分页
如图,参照官网表格demo,为表格添加分页的total(图一),当按Age为32进行筛选后,分页没进行刷新,实际筛选出来的应该是7条而不是16条(图二),如果把表格的pagination属性去掉使用a ...
php多表头表格,HTML多表头表格代码示例
1.多表头表格代码多表头表格 body{ width:98%; height:100%; font-size:12px; background-color:#FCF; text-align:cent ...
typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接这里module moduleResolution的配置都会影 ...
引入antd组件样式_个人作品：一个技术栈koa2+ mysql+react + antd的个人博客
前言此项目是个人博客,有前端界面+后台管理系统:目的是当做react和node的练手项目,同时还可以了解到服务器nginx部署web站点以及备案和域名的基本操作流程. 项目预览地址 https:// ...
基于react antd的新的tag和Badge的组合使用
在react+antd项目中,多个项目中均出现使用tag的时候出现删除标签失败或者删除错误等问题. 这个bug查找无果,因此使用div重新写了一个tag和badge的组合体组件. 该文章需要具备以下知 ...

react antd实现竖向表头表格

react antd实现竖向表头表格相关推荐

最新文章

热门文章