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


Posted in Javascript onOctober 27, 2020

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

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

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

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

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

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

表格空缺

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

结论:

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

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

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

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

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

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

Javascript 相关文章推荐
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
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与已存在的Java应用程序集成
2006/10/09 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
javascript回到顶部特效
2016/07/30 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
vue实例的选项总结
2020/06/09 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
C#笔试题
2015/07/14 面试题
与UNIX有关的几个名词
2015/09/17 面试题
生产工厂门卫岗位职责
2014/09/26 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
劳保用品管理制度范本
2015/08/06 职场文书