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


Posted in Javascript onOctober 27, 2020

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

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

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

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

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

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

表格空缺

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

结论:

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

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

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

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

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

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

Javascript 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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 similar_text()函数的定义和用法
2016/05/12 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
json数据的列循环示例
2013/09/06 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
异常和异常类的概念
2014/09/12 面试题
妇产医师自荐信
2014/01/29 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
校庆接待方案
2014/03/18 职场文书
学生安全责任书
2014/04/15 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL