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


Posted in Javascript onOctober 27, 2020

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

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

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

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

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

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

表格空缺

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

结论:

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

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

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

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

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

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

Javascript 相关文章推荐
iframe实用操作锦集
Apr 22 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
JavaScript canvas实现文字时钟
Jan 10 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
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
JS 时间显示效果代码
2009/08/23 Javascript
javascript 节点排序 2
2011/01/31 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
了解重排与重绘
2019/05/29 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
python中abs&map&reduce简介
2018/02/20 Python
python实现梯度下降算法
2020/03/24 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
大二学年个人总结
2015/03/03 职场文书
行政前台岗位职责
2015/04/16 职场文书
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫