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


Posted in Javascript onOctober 27, 2020

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

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

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

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

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

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

表格空缺

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

结论:

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

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

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

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

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

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

Javascript 相关文章推荐
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 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
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
python实现TF-IDF算法解析
2018/01/02 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
HTML5新标签兼容——> 的两种方法
2018/09/12 HTML / CSS
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
英语商务邀请函范文
2014/01/16 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
剪彩仪式主持词
2014/03/19 职场文书
实验室标语
2014/06/21 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
员工手册编写范本
2015/05/14 职场文书
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS