现在有一个表格,里面的列数是不固定的(可以重复写入数据),且列数行数都可能很多,就带来一个问题:

  必须要固定表头,但是antd 的表格组件设置了固定表格

    scroll={{x:1000,y:300}}

  这个 x 必须设置且一定不能这样设置,同时columns设置除最后一行外每行的 width

  然而并没有什么卵用 -。-

  关键点还是在于 x ,文档中讲可以为百分数、数字 和true,由于列数不固定,百分数也不靠谱

  最后这样解决的:

  计算列数,大致得到最宽列所对应的宽度,然后设置 columns.length * maxWidth  ,这样就刚好合适了,只是本没有那么宽的列也会被拉伸,但我的需求达到了。

  如果有人发现了更好的办法,请不吝赐教。

ant design 的Table组件固定表头时不对齐的更多相关文章

  1. 解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

  2. 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐

    在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...

  3. 封装一个漂亮的ant design form标签组件

    在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: import React,{Fragment} from 'r ...

  4. 使用Ant Design的select组件时placeholder不生效/不起作用的解决办法

    先来说说使用Ant Design和Element-ui的感觉吧. 公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭 ...

  5. iview中,table组件在缩进时产生的bug。

    问题描述: 在父元素因为缩进的关系撑开时,table组件不会因为父元素的撑开而自适应,问题如图 解决办法:在父一级的组件中使用table {width: 100% !important},强制使表格宽 ...

  6. react的ant design的UI组件库

    PC官网:https://ant.design/ 移动端网址:https://mobile.ant.design/docs/react/introduce-cn antd-mobile :是 Ant ...

  7. table创建固定表头

    布局:两个div,上部内容将表头复制,高度固定,下部div内部将table设置为margin:-**px; 隐藏掉表头,下部div设置overflow,即可. 代码:

  8. Ant Design的Form组件中FormItem名称相同引起的问题

    1.问题描述 在使用Antd组件Form表单的过程中,会出现FormItem同名的情况,此时要特别注意同名引起的表单行为异常问题,主要表现在以下方面: (1)同名表单项的值共享,并且其中一个的值改变, ...

  9. element-ui table组件使用v-if时的问题

    element-ui项目中经常遇到需要使用v-if指令来根据情况动态显示隐藏某些列情况,这时就会出现滚动条样式异常.列错乱.列宽错乱等问题 解决办法:在el-table上添加:key="Ma ...

随机推荐

  1. java future模式 所线程实现异步调用(转载

    java future模式 所线程实现异步调用(转载) 在多线程交互的中2,经常有一个线程需要得到另个一线程的计算结果,我们常用的是Future异步模式来加以解决.Future顾名思意,有点像期货市场 ...

  2. 21Hash算法以及暴雪Hash

    一:哈希表简介 哈希表是一种查找效率极高的数据结构,理想情况下哈希表插入和查找操作的时间复杂度均为O(1),任何一个数据项可以在一个与哈希表长度无关的时间内计算出一个哈希值(key),然后在常量时间内 ...

  3. SpringBoot-provider-JPA Not a managed type 问题分析及解决办法

    spring boot jpa-java.lang.IllegalArgumentException: Not a managed type异常问题解决方法 JPA实体类没有被扫描到,导致这样的情况有 ...

  4. vue2——指令渲染,{{}}渲染

    博客地址 :https://www.cnblogs.com/sandraryan/ 声明式的渲染,以{{}}的形式调用数据 <!DOCTYPE html> <html lang=&q ...

  5. Jquery FormData文件异步上传 快速指南

    网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: <form id=&quo ...

  6. oracle自动选择索引

    如果表中有两个以上(包括两个)索引,其中有一个唯一性索引,而其他是非唯一性. 在这种情况下,ORACLE将使用唯一性索引而完全忽略非唯一性索引. 举例: SELECT ENAME FROM EMP W ...

  7. windows 怎样关闭redis

    安装redis之后在命令行窗口中输入 redis-server redis.windows.conf 启动redis关闭命令行窗口就是关闭 redis.---redis作为windows服务启动方式r ...

  8. python yield 和 return 对比分析

    相同点:都是返回函数执行的结果 不同点:return 在返回结果后结束函数的运行,而yield 则是让函数变成一个生成器,生成器每次产生一个值(yield语句),函数被冻结,被唤醒后再产生一个值 例子 ...

  9. torch中的copy()和clone()

    torch中的copy()和clone() 1.torch中的copy()和clone() y = torch.Tensor(2,2):copy(x) ---1 修改y并不改变原来的x y = x:c ...

  10. seo优化:302跳转变为301跳转

    <?php header("Location: http://www.XXX.com",TRUE,301); exit; ?> 要加exit;不加exit;还是会是30 ...