antd table 表格在写滚动的时候会多出一行空白行

于 2023-08-25 09:37:15 发布
阅读量748 收藏 1
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66698608/article/details/132488644
版权 
:deep(.ant-table-tbody){
    .ant-table-measure-row{
        visibility:collapse !important
    }
}

hlh116
关注
antd table按表格里的日期去排序操作
01-18
表格内容 根据票据日期升序（这里是已经排序后的效果） 上代码 代码中data的内容如下 根据paper_date排序，因为目前这种格式不支持比较，需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的...
antd table 加滚动scroll出现空白行
weixin_46600931的博客
11-04 683
antd 这个组件库好多坑。
antd-Table组件渲染数据时出现第一行空白行
Li-的博客
05-06 4257
在表格设置了scroll之类会引起滚动的属性后，表格会在第一行之前生成一行tr，类名为ant-table-measure-row。同时如果还会遮挡部分选择框 更改全局样式 :global{ .ant-checkbox-wrapper{ margin: -3px !important; } tr.ant-table-measure-row{ // display: none; visibility: collapse;
antd Table 首行为空行，已解决（谷歌，safari）
hjy1006154810的博客
04-11 1522
出现原因： 修改表格行高 .ant-table-tbody > tr > td, { position: relative; height：0.48rem; padding: 7px 7px !important ; //修改表格padding上下值，或者height首行出现空行 overflow-wrap: break-word; } 解决方案 1、适用于谷歌浏览器 /* css假如一下代码*/ tr.ant-table-measure-row { ..
关于ant design Table嵌套子表单，展开父表单多了空白行
weixin_44435652的博客
12-02 1012
关于ant design Table嵌套子表单，展开父表单多了空白行 在官方文档中可以发现在展示树形结构时当dataSource中存在chinldren字段会显示树形结构，所以在需要嵌套子表格时，需要将dataSource中的children字段修改或者删除（根据需求） 我在处理时将children字段修改为newChildren就不会出现这种情况了 ...
固定Table第一行或某几行不随滚动条滚动而滚动
01-19
样式： 复制代码代码如下: .fixedHead { position: relative; top:[removed]this.offsetParent.scrollTop...复制代码代码如下: <div> <table class=”con_tbl”> ”fixedHead”> 标题不动</th> </tr> ”code”> <t
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
Antd的table组件表格的序号自增操作
01-18
1，效果图 2，实现方法 const columns = [ { title: '序号', render:(text,record,index)=>`${index+1}`, }, { title:'操作', dataIndex:'delete', ...Link to={{ pathname : '/info/Edit' , query : { id : ...
在antd Table中插入可编辑的单元格实例
01-21
看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是...
antd table出现空白列的问题
youzigrowing的博客
11-24 2067
antd table出现空白列的原因及解决方法
antd表格固定列出现空白间隙问题
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-02 7108
前言： antd表格设置了fixed属性后，在设置scroll:x的时候会出现空白间隙。 如下图： 解决方案： 1.动态计算宽度 //动态计算columns width属性（width属性不要加单位px） countX = (arr) => { return arr.reduce((cur, next) => { return cur + (next.width ? next.width : 0) }) } let columns=[{.
解决Antd 表格固定列后列间有空白间隙的问题
热门推荐
徐行之的博客
01-16 1万+
问题描述： antd 表格设置列fixed属性，scroll为x:true后，如果列数少，会出现列间空白间隙。 原因： antd的表格为了实现固定列，横向滚动的效果，会多渲染出一个用于覆盖原始表格固定列的表格，该表格只渲染被固定的列，然后在横向滚动条滚动时，该表格固定不动，下面被覆盖的原始表格来回滚动，从而实现左右某些列固定，中间列可以滚动的效果。然后，在渲染时，两个表格固定列每一列的列宽度...
解决ant-design表格固行和列多出空白列的问题
WebView
11-27 5000
1、问题描述 在使用表格组件的时候，使用固定列，可能会遇到当你表头内容小于你设定的值时，会多出一列空白的问题。 2、解决以上问题只需要我们动态的去判断当有多少列的时候需要去固定列这个属性。 3、 4、 ...
记录el-table出现滚动条，表头会有留白现象
ae_pppppp的博客
08-09 1667
如果有时候设置了不生效，那就是没有设置在全局下面，可能设置进了某个类下面。有时候table加上个别min-width时候，会出现留白现象。直接修改表头th背景色。
解决antdesigntable表格fixed后出现空白列
weixin_41940856的博客
12-28 2936
解决方案：将所有列的宽度加起来等于:scroll="{x:m}"里m的值,然后其中一列不设置宽度去自适应宽度
antd table 表格横向滚动条固定在底部
最新发布
05-25
要实现表格横向滚动条固定在底部，可以使用以下步骤： 1. 设置表格容器的高度，以便在表格内容过多时会出现纵向滚动条。 2. 设置表格的 scroll 属性，包括 x 和 y 两个参数，其中 x 用于控制横向滚动条的出现，y 用于控制纵向滚动条的出现。 3. 设置表格底部的固定行，使用 Table 组件的 footer 属性，将 footer 设为一个函数，返回一个固定行的 JSX 元素。 4. 在固定行的 JSX 元素中，设置一个空白的占位符元素，高度与表格容器的高度相同，以便在表格内容不足时，固定行也能占据整个表格底部。同时，设置一个空白的 div 元素，宽度与横向滚动条的宽度相同，以便在表格内容过多时，横向滚动条能够正常出现。 下面是一个示例代码： ``` import { Table } from 'antd'; const dataSource = [ // 数据源 ]; const columns = [ // 表头列配置 ]; const fixedRowHeight = 50; // 固定行的高度 const scrollHeight = 400; // 表格容器的高度 const scrollWidth = 1200; // 表格内容的宽度，需要根据实际情况进行调整 function renderFooter() { return ( <tr> <td colSpan={columns.length}> <div style={{ height: `${scrollHeight - fixedRowHeight}px` }} /> <div style={{ width: `${scrollWidth}px`, height: `${fixedRowHeight}px` }} /> </td> </tr> ); } function App() { return ( <Table dataSource={dataSource} columns={columns} scroll={{ x: scrollWidth, y: scrollHeight }} footer={renderFooter} /> ); } ``` 在上面的代码中，我们先设置了固定行的高度和表格容器的高度，然后在 renderFooter 函数中，返回一个包含空白占位符和横向滚动条占位元素的 JSX 元素。最后，在 Table 组件中，将 scroll 属性设置为包含横向滚动条宽度和表格容器高度的对象，将 footer 属性设置为 renderFooter 函数即可。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值