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


Posted in Javascript onOctober 27, 2020

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

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

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

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

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

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

表格空缺

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

结论:

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

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

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

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

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

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

Javascript 相关文章推荐
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
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生成html分页列表的代码
2007/03/18 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
python smtplib发送带附件邮件小程序
2018/05/22 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python os.fork() 循环输出方法
2019/08/08 Python
Python time库基本使用方法分析
2019/12/13 Python
tornado+celery的简单使用详解
2019/12/21 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python面向对象编程基础实例分析
2020/01/17 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
JAVA代码查错题
2014/10/10 面试题
《望庐山瀑布》教学反思
2014/04/22 职场文书
离职保密承诺书
2014/05/28 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
教育教学工作反思
2016/02/24 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL