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


Posted in Javascript onOctober 27, 2020

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

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

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

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

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

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

表格空缺

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

结论:

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

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

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

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

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

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

Javascript 相关文章推荐
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
JS重载实现方法分析
Dec 16 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
koa-passport实现本地验证的方法示例
Feb 20 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一些常用的正则表达式字符的一些转换
2008/07/29 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
javascript常用的方法整理
2015/08/20 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python学习教程之使用py2exe打包
2017/09/24 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python画图的函数用法以及技巧
2019/06/28 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
项目投资意向书
2014/04/01 职场文书
国庆横幅标语
2014/10/08 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python