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

最新推荐文章于 2024-07-05 10:47:47 发布
最新推荐文章于 2024-07-05 10:47:47 发布
阅读量780 收藏
点赞数
文章标签： antd table动态表头
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39996739/article/details/112887801
版权
本文主要探讨了在使用Ant Design的Table组件时遇到的表头与表体列不对齐以及固定列行高不一致的问题。针对这些问题，提出了官方推荐的解决方案，包括设置宽度、滚动条和CSS属性`table-layout:fixed`。同时，文章提到了在Antd V4版本中对这些问题的改进，但V3版本仍存在的遗留问题，以及如何通过触发窗口resize事件来实现行高对齐的方法。
摘要由CSDN通过智能技术生成

一、固定表头后表体列和表头不对齐

此问题可能在antd3.24.0版本之前都存在，反正3.16.2版本是存在这个问题的，如果是3.24.0之前的版本估计只能通过修改css样式解决。

按照官网说的：

1、若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。

2、建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。

如果按照以上方法处理还是存在部分偏差，可以尝试给需要固定表头table设置css属性table-layout:fixed。

可以看到官网在3.24.0版本后table组件的属性新增了tableLayout，https://ant.design/components/table-cn/#API 。其默认值说明里也介绍了：固定表头/列或使用了 column.ellipsis时，默认值为 fixed

如果给column设置啦属性ellipsis:true，table的tableLayout会默认为fixed。

当然添加table-layout:fixed的同时还是需要满足官网说的给每列设置width、scroll.x 大于表格宽度的值。

二、配置fixed固定左右侧列后，固定列的行高和表体内容行高不对齐

1.默认初始化数据渲染后不对齐

只是普通展示列表，数据渲染完后不对齐的情况，可以确认下table配置的rowKey是否每行都存在该字段值，如果都不存在为null或者部分不存在会导致行高不对齐，如下图：

最低0.47元/天 解锁文章
weixin_39996739
关注
antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
weixin_39614831的博客
12-21 1738
一、固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在，反正3.16.2版本是存在这个问题的，如果是3.24.0之前的版本估计只能通过修改css样式解决。按照官网说的：1、若列头与内容不对齐或出现列重复，请指定固定列的宽度width。如果指定width不生效，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。2、建议指定scroll.x为...
table内容出现滚动条和表头对齐问题
05-09
table内容出现滚动条和表头对齐
Ant-Design-Vue中Table使用固定列后行之间对不齐的问题解决
dip_chao的博客
01-25 3940
由于需求要求固定列这个字段要进行2行的折行，所以进行了自定义样式的控制，这样导致固定列有些行高度和主表格高度不一致，导致塌陷，官网要求是不能折行的。
antdesign vue 列为数据空时 数据与表头不对齐ant design vue a-table 表头和内容不对齐
Jack, what else can you do besides holding your little darling?
07-02 669
antdesign vue 列为数据空时 数据与表头不对齐ant design vue a-table 表头和内容不对齐，一行代码解决问题
关于antd table 表头与表格不对齐问题
halations的博客
09-29 4038
出现这个问题一般是设置了scroll属性 解决方法：给每个表头设置width，然后最后一个可以不设置，antd会自适应最后一个。 { title:'任务类型', dataIndex:'type', key:'type', width:90, }, 如果还没解决怎么办？ 可能出现的问题是因为render的值长度大于了外面设置的width 比如 { ...
解决Antd Table组件表头不对齐的问题
01-18
在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为...
ant table组件使用心得-表头不对齐解决办法
余光的博客
01-15 9743
实习期间遇到需要列表展示数据的需求，从ant开源库上拿下来示例代码如下 使用的场景时在react项目中，所有直接引入 一 使用 1.引入组件 import { Table } from ‘antd’; 2.手动写入需要渲染的数据 这里不细说了，在模版中，为你提供了很多种排列方式，有跨行显示，也有跨列显示 3.render中写table组件 <Table columns={colu...
ant design vue中a-table固定头和列后出现行内容不对齐的情况
weixin_42043532的博客
02-19 5179
如图所示，在固定头和列后出现了几个问题，查看原因后得知是表格下部出现滚动条导致的，所以我把左右固定列的高度减去滚动条的高度就可以解决这个问题 mounted () { // this.h = document.querySelector('.ptp-layout-main').offsetHeight - 45 const _this = this var tableBodyInnerNodeList = document.querySelectorAll('.ant-table-body-.
ant design 的Table组件固定表头时不对齐
weixin_30765475的博客
03-12 1046
现在有一个表格，里面的列数是不固定的（可以重复写入数据），且列数行数都可能很多，就带来一个问题： 　　必须要固定表头，但是antd 的表格组件设置了固定表格 　　　　scroll={{x:1000,y:300}} 　　这个 x 必须设置且一定不能这样设置，同时columns设置除最后一行外每行的 width 　　然而并没有什么卵用 -。- 　　关键点还是在于 x ，文档中讲可以为百分数、...
关于ant-designa固定表头和列对不齐的问题最简单解决方案
weixin_44481459的博客
06-04 2576
最近在用ant-design开发react项目，因为所用版本为3.0X，所以遇到了一些问题 1. 表头和列对不齐 看了官方文档，给每个表头都加了宽带，但是最后一列后会有空余，按推荐方法，还是没解决，最后F12了下，看了dom结构，改了一下代码，完成 .ant-table-fixed-header .ant-table-scroll .ant-table-header { min-width: 0px !important; } （要想表头自适应的话，最好用百分比） ...
ant-design-vue a-table 表头固定后和内容不对齐的问题
热门推荐
ZTJ_123的博客
08-08 1万+
ant-design-vue a-table 表头固定后和内容不对齐的问题前言padding， border 和 margin固定内容列的宽度完整的columns和HTML内容(不太完整，没敢全放)笔记问题 前言 最近在项目中使用ant-design-vue，在做表格的时候需要固定表头，但是发现列对不齐，相信使用过的同学都遇到过这个问题。 网上各种查找，还是找不到解决办法，在这里强调一下，官方文档...
【样式问题】Antd Table【表格】实现表头固定时，与内容不对齐问题
窝窝头的博客
05-17 9001
目录： 版本说明 问题 问题分析 解决办法 一、版本说明 "ant-design-vue": "^1.3.5" 二、问题描述如下 2.1、按照官网设置过以下属性值，发现可以滚动，但是与内容错位啦 :scroll="{x: 1200, y: 720}" 三、原因分析： 3.1、查看官方文档，这里，发现文档的提示如下： 若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。 如果指定 width 不生效或出现白色垂直空隙， 请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段
在Vue中表头和渲染的内容不能对齐，该怎么解决 告诉我详细步骤
weixin_42613360的博客
02-16 410
在 Vue 中，如果表头和渲染的内容不能对齐，可以通过以下步骤解决： 首先，可以为表头和渲染的内容分别定义 CSS 样式，分别为表头和内容的单元格设置相同的宽度。 如果表头和内容的单元格宽度不同，可以使用 CSS 盒模型中的 padding 和 border 属性来调整单元格的宽度。 如果表格中的数据长度超过了单元格的宽度，可以使用 CSS 中的 text-overflow 属性来控制文本的...
ant design vue a-table 表头和内容不对齐，一行代码解决问题
陈新科的博客
11-24 3749
动态设置x轴的长度就可以了，有几列表头就设置成百分之几，完美~ <a-table :columns="columns" :data-source="data" size="small" :loading="loading2" :scroll="{ x: `${columns.length}0%`, y: 400 }"//关键代码 > ...
Vue 使用Ant-design框架固定表头时导致数据错位
caoxu12457的博客
04-15 3681
需要指定 column 的 width 属性，否则列头和内容可能不对齐。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。
解决ant-design-vue的Table组件 增加了 scroll.y 配置，表头对不齐问题
最新发布
csdn_bk的博客
07-05 1102
在使用 ant-design-vue 的 Table 组件，在不使用分页器的情况下，让table内容固定高度，预期是出现滚动条。结果滚动条出现，表头和表内容列对不齐情况。
antd——table样式：表头和表体错位问题
yehaocheng520的博客
12-27 1万+
今天测试遇到一个问题，如下图所示：使用ant design vue的框架搭建的表格中，出现表头和表体出现错位的问题。 解决方法如下： 1.设置scroll——:scroll="{ y: 500, x: 1400 }" 主要是横向要设置，也就是x，y方向设置是为了固定表头。 2.设置columns——列宽度 <a-table :rowKey="(r, i) => i" :scroll="{ y: 500, x: 1400 }" :columns="column
antd table动态表头_React项目使用ant Table组件动态生成columns
05-25
要在React项目中使用Ant Design的Table组件动态生成表头，需要完成以下步骤： 1. 定义表格数据源 首先需要定义表格的数据源，可以使用一个数组来存储表格的数据，例如： ```javascript const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; ``` 2. 定义表头数据源 接下来需要定义表头的数据源，可以使用一个数组来存储表头的数据，例如： ```javascript const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]; ``` 3. 动态生成表头 在Ant Design的Table组件中，可以使用columns属性来指定表头数据源。为了动态生成表头，需要在渲染组件时动态生成表头的数据源，并将其传递给Table组件的columns属性，例如： ```javascript import React, { useState } from 'react'; import { Table } from 'antd'; const DynamicTable = () => { const [columns, setColumns] = useState([ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]); const handleAddColumn = () => { const newColumn = { title: `Column ${columns.length + 1}`, dataIndex: `column${columns.length + 1}`, key: `column${columns.length + 1}`, }; setColumns([...columns, newColumn]); }; return ( <> <button onClick={handleAddColumn}>Add Column</button> <Table dataSource={data} columns={columns} /> </> ); }; export default DynamicTable; ``` 在上面的代码中，我们使用useState钩子来定义表头的数据源，并渲染一个添加列的按钮。当点击添加列按钮时，会动态生成一个新的列，并将其添加到表头的数据源中。这样就可以动态生成表头了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值