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


Posted in Javascript onOctober 27, 2020

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

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

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

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

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

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

表格空缺

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

结论:

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

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

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

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

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

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

Javascript 相关文章推荐
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
Aug 14 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
PHP define函数的使用说明
2008/08/27 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php文件操作实例代码
2012/05/10 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
限制复选框的最大可选数
2006/07/01 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
Vuex简单入门
2017/04/19 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python 数据结构之旋转链表
2017/02/25 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
使用tensorflow实现线性svm
2018/09/07 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
python实现词法分析器
2019/01/31 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
详解python metaclass(元类)
2020/08/13 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
旅游项目开发策划书
2014/01/18 职场文书
保密工作承诺书
2014/08/29 职场文书
投资意向协议书
2015/01/29 职场文书
李强为自己工作观后感
2015/06/11 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
python 提取html文本的方法
2021/05/20 Python