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


Posted in Javascript onOctober 27, 2020

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

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

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

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

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

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

表格空缺

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

结论:

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

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

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

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

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

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

Javascript 相关文章推荐
Javascript模块模式分析
May 16 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
js完整倒计时代码分享
Sep 18 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
PHP5.3新特性小结
2016/02/14 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
win与linux系统中python requests 安装
2016/12/04 Python
Python开发的实用计算器完整实例
2017/05/10 Python
python中的set实现不重复的排序原理
2018/01/24 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
python matplotlib拟合直线的实现
2019/11/19 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
《在家里》教后反思
2014/03/01 职场文书
法人授权委托书格式
2014/04/08 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python
python_tkinter事件类型详情
2022/03/20 Python
python套接字socket通信
2022/04/01 Python