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


Posted in Javascript onOctober 27, 2020

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

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

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

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

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

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

表格空缺

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

结论:

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

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

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

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

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

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

Javascript 相关文章推荐
javascript 获取网页标题代码实例
Jan 22 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
JavaScript类的继承多种实现方法
May 30 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过滤危险html代码的函数
2008/07/22 PHP
php strcmp使用说明
2010/04/22 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
php实现网页端验证码功能
2017/07/11 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
JavaScript入门基础
2015/08/12 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
JS实现购物车特效
2017/02/02 Javascript
手机端转换rem适应
2017/04/01 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
Python 解析XML文件
2009/04/15 Python
python实现代理服务功能实例
2013/11/15 Python
Python yield 小结和实例
2014/04/25 Python
python简单程序读取串口信息的方法
2015/03/13 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
幼儿园托班开学寄语
2014/01/18 职场文书
春节活动策划方案
2014/01/24 职场文书
销售顾问工作计划书
2014/08/15 职场文书
营销学习心得体会
2014/09/12 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL