antd table动态表头_解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
1、固定表头后表体列和表头不对齐
此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决。css
按照官网说的:react
一、若列头与内容不对齐或出现列重复,请指定固定列的宽度 width。若是指定 width 不生效,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。git
二、建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x。github
若是按照以上方法处理仍是存在部分误差,能够尝试给须要固定表头table设置css属性table-layout:fixed。浏览器
能够看到官网在3.24.0版本后table组件的属性新增了tableLayout,https://ant.design/components/table-cn/#API 。其默认值说明里也介绍了:固定表头/列或使用了 column.ellipsis时,默认值为 fixedantd
若是给column设置啦属性ellipsis:true,table的tableLayout会默认为fixed。布局
固然添加table-layout:fixed的同时仍是须要知足官网说的给每列设置width、scroll.x 大于表格宽度的值。性能
2、配置fixed固定左右侧列后,固定列的行高和表体内容行高不对齐
1.默认初始化数据渲染后不对齐spa
只是普通展现列表,数据渲染完后不对齐的状况,能够确认下table配置的rowKey是否每行都存在该字段值,若是都不存在为null或者部分不存在会致使行高不对齐,以下图:.net
2.数据已经渲染,手动操做内容致使不对齐
若是表格内容会动态改变,好比可编辑表格内容校验失败后,下面显示错误信息、表格内容是能够多选的下拉选择框,选择的选项超过本来行高后表格内容被撑开等,都不会触发table动态计算fixed列和表格内容的高度,因此会出现行高不对齐。
在antd V4版本里以上问题获得了解决,并添加了可展开行和固定列功能的结合功能,能够看该连接的说明https://zhuanlan.zhihu.com/p/102037418,可是antd v4版本不兼容IE11如下的浏览器,并且v3用的还有不少,这个问题已经成为遗留问题,github有说http://react-component.github.io/table/examples?path=/story/rc-table--readme能够单独下载引用实现对齐,不知道该组件是否为v4中的组件,是否不兼容低版本的IE。
v3的版本里只能本身去根据内容动态去计算处理了,不过antd的table会在窗口resize的时候,从新计算表格的排版,可使用这个方式更快捷的实现行高对齐,不过可能性能会差一点。可使用以下方法,在须要从新计算表格行高的时候触发
const myEvent = new Event('resize');
window.dispatchEvent(myEvent);
antd table动态表头_解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...相关推荐
- antd 设置表头属性_解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...
- elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景 使用elementUI中的table时,给包含数字字母中文的名称等字段排序 例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
- layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题 加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...
- antd 实现pdf 预览_解决react项目中PDF的显示与打印问题
最近项目中有这样一个需求: 1. 页面中可以显示pdf 2. 不希望把整个页面打印下来,只打印显示PDF的部分,可以使用浏览器自带打印功能 PDF文件的显示 拿到这个需求,真时一头雾水.因为没有做过类 ...
- react 树形菜单_关于React 使用antd组件递归实现左侧菜单导航树(MenusTree)的示例...
一.菜单组件Demo 这里本人采用的是蚂蚁金服(antd)组件库里的{Menu}组件写的一个左侧菜单树的小Demo(整套开发环境是React+Redux+webpack) import React f ...
- antd tree 动态添加_一文了解Matlab如何制作动态图像
今天的推文,我们主要来介绍matlab中几种绘制动态图像的方法.首先,以之前介绍过的心形图为例,来说明在matlab中如何将绘图过程保存为gif动态图像. 1. Matlab绘制GIF图像 Step1 ...
- react根据中文获取拼音_解决 React 中的 input 输入框在中文输入法下的 bug
以下会涉及到的技术点:react mobx compositionstart compositionupdate compositionend 问题描述 在使用 input 时,通常会对输入的内容做校 ...
- layui table动态选中_「Excel之家ExcelHome」动态图表效果好,年薪三万没烦恼
先来看一组数据,是某公司上半年在各大城市的销售情况: 干巴巴的数据看起来总是有点枯燥,用动态的图表来展示各月份不同区域的的销售状况,效果就好多了: 如何实现这样的效果呢?其实很简单. 步骤1 ...
- antd form rules字数限制_【React】antd的form表单的自定义校验规则的用法
在用到antd的Form组件的时候,可能会用到自定义的规则,以我的项目为例:在输入名称的时候需要请求接口,校验的内容是后台返回的内容,所以这个时候需要用到自定义的校验规则 屏幕快照 2019-06-1 ...
最新文章
- 投稿人就是AI顶会最好的「审稿人」!中国学者提出同行评审新机制
- 测试一下StringBuffer和StringBuilder及字面常量拼接三种字符串的效率
- 【论文速递】最新计算机视觉/图像处理方向论文
- 助力健康中国,国内首个中文医疗信息处理挑战榜正式发布
- 设置计算机的启动顺序CDROM.C.A,amibios怎么设置cdrom
- Android之layout属性介绍
- vert.x 分布式锁_使用Vert.x进行响应式开发
- 乘法器之四( 乘加器(Sum of multiplication))
- springsecurity oauth2_跟OAuth2杠上了,老师,我要学全套的!
- 上传图片至服务器,写入到数据库Blob字段中,以及从数据库读取Blob信息(iframe父子页面传值)(1)
- 网络流入门题目 - bzoj 1001
- 组装一台微型计算机需要哪些部件6,微型计算机的组成与配置(6页)-原创力文档...
- linux下物理内存不足,vm中linux物理内存不足解决方案
- Bigemap中添加离线地图数据包 教程
- smartdrv.exe是什么(收藏)
- java毕业生设计大学生旅游拼团网站计算机源码+系统+mysql+调试部署+lw
- TI C64X+通用库函数使用手册
- php微商城微信支付教程,微信支付接口配置教程(微商城版)
- Mysql - 开发技巧(二)
- 【ArcGIS微课1000例】0026:ArcGIS10如何自定义工具条?
热门文章
- php框架所用到的核心概念,【PHP】PHP现代框架代表-Laravel框架核心技术特性
- 请查收 | 2021 阿里妈妈技术文章回顾
- java线程同步的实现_Java并发编程(三) - 实战:线程同步的实现
- 计算机软件技能高考好考么,湖北技能高考:上不了本科,优先考虑这4所一档高职...
- c# 如何抓微信把柄_C#微信公众号开发--微信事件交互
- hashtable允许null键和值吗_MySQL默认值选型是空,还是 NULL-爱可生
- python题库选择填空_python练习题4.18猴子选大王
- DIY人脸跟踪电风扇送女朋友(2)
- 哇靠靠,这也行?零基础DIY无人驾驶小车(三)
- [深度学习] 自然语言处理 --- Self-Attention(三) 知识点与源码解析