antd的表格组件错乱问题

环境

react:17.0.2

antd:3.26.20

问题

表格头列宽度和表格体列宽度不一致,表格错乱

解决

针对这个问题官方github仓库里面有专门的issues

https://github.com/ant-design/ant-design/issues/13825

里面给出了几种解决方案:

  1. columns设置中加上固定宽度

    const columns = [{title: "Name",dataIndex: "name",width: 200,},{title: "Address",dataIndex: "address",width:200,}
    ];
    

    这种解决方案成功概率很低,基本是无用的,因为我遇到问题时都设置了固定宽度

  2. 设置长数字和长单词换行,与ellipsis配置结合

    columns={[{...textWrap: 'word-break',ellipsis: true,
    }]}
    

    在 3.24.0 之前,你需要针对超长字段的列增加折断样式:

    columns={[{...render: (text, record) => (<div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>{text}</div>),
    }]}
    

    尝试上面的方案进行处理之后仍然没有解决问题

  3. 重置表格样式

    .ant-table-fixed {table-layout: fixed;
    }
    .ant-table-tbody > tr > td {word-wrap: break-word;word-break: break-all;
    }
    

    最后尝试也没成功,看来还是要靠自己

分析

出现问题的列,设置了ellipsis,会有不换行的样式,数据又出现非常长的,导致表格行被撑大了(只有表格体部分变大,表格头没变,出现了错乱),虽然表格列设置了宽度,审查元素也能看到表格头部分设置了宽度(在表格体部分单独的table标签),但是宽度并不能限制住不换行的长内容撑开盒子,所以问题的关键是限制住表格体那一列的宽度。

限制宽度可以使用max-width,那么给出现问题的列增加max-width样式就可以解决问题

  1. 增加className

    columns={[{...width: 150,className: 'limit-width',
    }]}
    
    .limit-width {max-width: 150px;
    }
    
  2. 设置行内样式

    columns={[{...width: 150,onCell: () => {return {style: {maxWidth: 150,}}},
    }]}
    

彩蛋

一维数组转化成树形结构的低复杂度方法

一般情况下一维数组转化成树形结构会采取递归方法,这种方法好理解,但是当这个一维数组特别庞大时,就会导致内存溢出。下面方法可以解决

export function generateTree(flatArr) {const tree = [];const map = new Map();// 将所有节点存储到map中flatArr.forEach((node) => {map.set(node.id, node)});// 遍历所有节点,将其添加到对应的父节点下flatArr.forEach((node) => {const parent = map.get(node.parentId);// 存在父节点,添加在父节点的childrenif (parent) {if (parent.children) {parent.children.push(node);} else {parent.children = [node];}} else {// 不存在父节点,说明是顶层节点tree.push(node);}});return tree;
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/28895.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C#】项目中添加png文件时,设置其“生成操作”(Build Action)属性

在C#项目中&#xff0c;当添加图像文件&#xff08;如PNG文件&#xff09;时&#xff0c;可以设置其“生成操作”&#xff08;Build Action&#xff09;属性&#xff0c;这个属性决定了编译器如何处理这些文件。 以下是几个常见的生成操作选项及其含义&#xff1a; Resource: …

C++类对象模型、类对象的存储方式、this指针、this指针的引出、this指针的特性、C语言和C++实现Stack的对比等的介绍。

文章目录 前言一、C类对象模型1. 类对象的存储方式2. 结构体内存对齐规则 二、this指针1. this指针的引出2. this指针的特性3. C语言和C实现Stack的对比 总结 前言 C类对象模型、类对象的存储方式、this指针、this指针的引出、this指针的特性、C语言和C实现Stack的对比等的介绍…

2024中国应急(消防)品牌巡展成都站成功召开!

汇聚品牌力量&#xff0c;共同相聚成都。6月14日&#xff0c;由中国安全产业协会指导&#xff0c;中国安全产业协会应急创新分会、应急救援产业网联合主办&#xff0c;四川省消防协会协办的“一切为了安全”2024年中国应急(消防)品牌巡展-成都站成功举办。该巡展旨在展示中国应…

VMware虚拟机linux无法使用ifconfig的解决方法

在有些linux系统中&#xff0c;输入ifconfig会报错&#xff0c;这是为什么呢&#xff1f; 如果出现 那是说明&#xff0c;你的linux内没有对应的命令。 具体可输入 ls /sbin 查看,发现其中确实没有ifconfig命令 这个解决很简单&#xff0c;在命令行输入 sudo apt-get inst…

Cesium源码解析六(3dtiles属性获取、建筑物距离计算、建筑物着色及其原理分析)

快速导航 Cesium源码解析一&#xff08;搭建开发环境&#xff09; Cesium源码解析二&#xff08;terrain文件的加载、解析与渲染全过程梳理&#xff09; Cesium源码解析三&#xff08;metadataAvailability的含义&#xff09; Cesium源码解析四&#xff08;metadata元数据拓展…

Arcgis投影问题

今天下载数据&#xff0c;右键查看属性&#xff0c;发现只有地理坐标系&#xff0c;在arcgis里面进行展示有点丑 怎么变成下面的&#xff1f; 步骤1&#xff1a;加载数据 打开ArcGIS Pro或ArcMap。在目录窗口中&#xff0c;右键点击“文件夹连接”或“文件夹”选项&#xff0c…

前沿观察|工业元宇宙时代下的CAE畅想

工业元宇宙&#xff0c;作为“元宇宙”概念的一个分支&#xff0c;标志着工业数字化转型迈向新纪元。在GTC大会上&#xff0c;NVIDIA黄仁勋展示了工业元宇宙如何通过先进的模拟技术、AI驱动的数字孪生技术和Omniverse平台&#xff0c;加速企业数字化转型&#xff0c;推动未来工…

SqlSugar无实体CURD应用-C#

本文所述开发环境&#xff1a;.C#、NET8、Visual Studio2022 SqlSugar无实体查询数据表 首先根据《SqlSugar使用DbFirst对象根据数据库表结构创建实体类-C#》中的描述新建好对应的数据库表 通过《SqlSugar有实体CURD应用-C#》中&#xff0c;已经知道SqlSugar在有实体的情况下…

Selenium - 启动后报org.openqa.selenium.InvalidArgumentException: invalid argument错

● 出现的异常&#xff1a; Build info: version: 3.141.59, revision: e82be7d358, time: 2018-11-14T08:25:48 System info: host: DESKTOP-H7TOMMO, ip: 192.168.64.1, os.name: Windows 10, os.arch: amd64, os.version: 10.0, java.version: 1.8.0_131 Driver info: dr…

标准立项 | 给水中试基地建设导则

结合近几年在已设计、建设和运维的不同规模的给水中试基地&#xff0c;凝练建设实践中所获得的实际经验和关键指标及参数&#xff0c;编制《给水中试基地建设导则》&#xff0c;以填补标准空白&#xff0c;统一建设标准。

Android Studio 2024.1.1(Koloa)版本 Profiler 工具变动

在 Android Studio 2024.1.1 (Koloa) 版本当中&#xff0c;Profiler 工具终于迎来了重大 UI 更新&#xff08;太感动了&#xff0c;因为之前的 Profiler 工具连接得慢&#xff0c;收集 Trace 信息还很卡&#xff0c;步骤繁琐等&#xff0c;这次更新有了很大的优化&#xff09; …

(四十一)Vuex之模块化与命名空间

文章目录 模块化命名空间模块动态注册保留 state 模块重用 上一篇&#xff1a;&#xff08;四十&#xff09;vuex之四个map辅助函数 模块化 在复杂的应用中&#xff0c;为了解决 Vuex store 对象变得臃肿的问题&#xff0c;可以使用 Vuex 模块&#xff08;module&#xff09;…

DY-34/60C电压继电器 带板前底座 约瑟JOSEF

系列型号&#xff1a; DY-32电压继电器&#xff1b;DY-36电压继电器&#xff1b; DY-33电压继电器&#xff1b;DY-37电压继电器&#xff1b; DY-34电压继电器&#xff1b;DY-38电压继电器&#xff1b; DY-31电压继电器&#xff1b;DY-35电压继电器&#xff1b; DY-32/60C电…

时区设置函数【man 3 tzset】

1. NAME&#xff08;名&#xff09; tzset, tzname, timezone, daylight - 初始化时间转换信息 2. SYNOPSIS&#xff08;概要&#xff09; #include <time.h>void tzset(void);extern char *tzname[2]; extern long timezone; extern int daylight;glibc的功能测试宏要…

关于从大平台跳转各个应用,更新应用前端包后,显示的仍是旧的内容,刷新应用页面后方才显示新的内容的问题的排查和解决

我们从绿洲物联平台跳转智能锁应用&#xff0c; 如下&#xff0c;我们可以看到&#xff0c;我们是通过a标签去跳转应用的。但是我们打开控制台的话&#xff0c;因为a标签是另外新开一个页面&#xff0c;我们看不到新页面的html文档的加载情况。 我们可以临时把_blank改成_sel…

动力学笔记01——共振频率和共振带的数学定义

文章目录 0、背景描述1、正文2. 位移、速度、加速度的共振频率并不相同 0、背景描述 过去一年&#xff0c;我基本都在考虑塔架&#xff08;尤其是混塔&#xff09;频率仿真/模态分析的问题。关于这个问题&#xff0c;不仅有地基刚度&#xff0c;还有塔筒本身以及其他影响频率的…

【机器学习300问】120、该怎么用RNN来构建语言模型?

一、基本概念补充 在构建语言模型之前补充几个自然语言处理&#xff08;NLP&#xff09;基本概念。 &#xff08;1&#xff09;语料库&#xff08;Corpus&#xff09; ① 语料库的定义 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;语料库是一个经过组织和加工…

2024长三角高校数学建模:“抢救”落水手机

背景 上有天堂&#xff0c;下在苏杭&#xff1b;五一假期&#xff0c;杭州西湖、西溪湿地、京杭大运河等著名景点&#xff0c;游人如织&#xff0c;作为享誉国内外的旅游胜地&#xff0c;杭州再次成为顶流。今年五一假期&#xff0c;西湖不断忙上热搜&#xff0c;据悉今年“五…

Android adb-wm命令详解

1.wm窗口管理命令可以获取屏幕的 分辨率、像素密度 等信息&#xff0c;甚至可以临时修改屏幕的 分辨率、像素密度 等参数&#xff0c;可以很方便地查看 APP 在不同像分辨率和素密度手机/平板上的显示效果。 查看帮助 wm # 或 wm help 查看 屏幕分辨率 和 像素密度 wm size …

使用python库moviepy完成视频剪辑

1.关于moviepy和原理 moviepy事github上面的一个开源项目&#xff0c;地址是&#xff1a;GitHub - Zulko/moviepy: Video editing with Python 官方文档地址&#xff1a; User Guide — MoviePy 1.0.2 documentation 中文版文档可参考&#xff1a; MoviePy中文手册 — mov…