antd 表格列宽自适应方法以及错误处理操作


Posted in Javascript onOctober 27, 2020

当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量

也就是没有设置宽度的列会平分表格中余下的宽度

在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, 那么他们会按照设置宽度的比例瓜分表格的宽度

表格横向滚动, 序号, 权属人左定位

antd 中的表格列固定是隐藏原列, 然后又在上面覆盖新列实现的, 也就是说白色部分实际是原列, 只不过是被隐藏了

这个表格中只有序号有固定宽度, 那么余下所有列平分表格剩余宽度, 被定为的权属人的新列宽度是由内容撑开的, 所有新列比原列短, 就出现了空缺

表格空缺

antd 表格列宽自适应方法以及错误处理操作

结论:

所有被定位的列一定要设置固定宽度。

补充知识:antd table 表格错位的问题

当遇到antdtable表格错位的时候,看文档,文档上说的是,要设置每一列的宽度,但是已经设置了,却还是错位。后来经过查找资料,发现最后一列就不用设置的话,就不会再错位,因为antd会自己给最后一列分配宽度。

在这里还遇到一个问题,就是当我们给列设置的宽度不合理的话(一般情况是设置的宽度较小),也会错位。这个时候,只需要调整宽度就好

antd 表格列宽自适应方法以及错误处理操作

以上这篇antd 表格列宽自适应方法以及错误处理操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
详谈javascript异步编程
Feb 21 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
js实现简易ATM功能
Oct 27 #Javascript
Antd的table组件表格的序号自增操作
Oct 27 #Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 #Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 #Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 #Javascript
ant design 日期格式化的实现
Oct 27 #Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 #Javascript
You might like
PHP_MySQL教程-第一天
2007/03/18 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
javascript测试题练习代码
2012/10/10 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
python flask 多对多表查询功能
2017/06/25 Python
Python线性回归实战分析
2018/02/01 Python
python实现事件驱动
2018/11/21 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
个人自我鉴定写法
2013/11/30 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
社区工作者演讲稿
2014/05/23 职场文书
化妆品活动策划方案
2014/05/23 职场文书
考试作弊检讨书
2015/01/27 职场文书
小学教师党员承诺书
2015/04/27 职场文书
企业百日安全活动总结
2015/05/07 职场文书
团队拓展训练感想
2015/08/07 职场文书
放飞理想主题班会
2015/08/14 职场文书