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


Posted in Javascript onOctober 27, 2020

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

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

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

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

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

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

表格空缺

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

结论:

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

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

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

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

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

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

Javascript 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
javascript实现下拉菜单效果
Feb 09 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字符串函数 str类常见用法示例
2020/05/15 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
python如何使用unittest测试接口
2018/04/04 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python3中rank函数的用法
2019/11/27 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
一夜的工作教学反思
2014/02/08 职场文书
公司拓展活动方案
2014/02/13 职场文书
文明寄语大全
2014/04/11 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
土地转让协议书
2014/09/27 职场文书
服务员态度差检讨书
2014/10/28 职场文书
学生自我评语
2015/01/04 职场文书
入党申请书怎么写?
2019/06/11 职场文书
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python