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


Posted in Javascript onOctober 27, 2020

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

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

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

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

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

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

表格空缺

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

结论:

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

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

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

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

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

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

Javascript 相关文章推荐
JQuery 网站换肤功能实现代码
Nov 02 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
js实现石头剪刀布游戏
Oct 11 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 Javascript
Java 生成随机字符的示例代码
Jan 13 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设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
js对象的复制继承实例
2015/01/10 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Python tkinter三种布局实例详解
2020/01/06 Python
关于Keras Dense层整理
2020/05/21 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
Final类有什么特点
2012/04/25 面试题
应届护士推荐信
2013/11/16 职场文书
面试后的感谢信范文
2014/02/01 职场文书
旅游节目策划方案
2014/05/26 职场文书
工作失误检讨书
2015/01/26 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书