React Antd V5 Table设置固定高度

本文作者在尝试使用React+Antd开发时遇到Table高度无法设置且分页问题,导致布局异常。分享了如何通过自定义Table.less解决部分问题,但提到了两个UI方面的小缺陷:无数据时滚动条和数据多时底部样式问题。
摘要由CSDN通过智能技术生成

Vue + element代码写腻之后偶尔想换换口味,之前网上学的React没有用武之地啊,后来就想试试React+antd 版本是React18+AntdV5 本来写着挺顺的,结果用到Table之后发现Table封装的确实有点东西,but 写着写着发现Antd的Table没办法设置高度,但是可以设置滚动高度scroll,设置完之后发现分页数据多的时候没啥事,当你点击最后一页(最后一页的数据很少时),分页忽然跑到了上面,布局一下就变了,这TM的不会觉得很怪异的嘛,gitHub也有类似的问题,官网没解决,这要吐槽一下Antd了,后来借鉴gitHub代码,然后参考Element的Table出来了,话不多说上代码

(1)新建table.less(这段代码参考gitHub上的一位码友)

        
(2)在封装Table的时候引入
        
(3)然后这样就可以了,我是Table和Pagination分开的没用Table自带的,我是没办法接受没数据的时候空空的有数据的时候突然蹦出一个分页奇奇怪怪的
        

温馨提示如果对UI质量要求不是太高的话这就没问题了,如果有要求这样的话有两个小问题,当没数据的时候表格会产生滚动条,就算js判断 scroll 之后Table数量少的话还是会产生滚动条,这是个问题,另一个问题就是数据多的话最后一条线会跟表格的底线这样会很难看(图在下方),这算是遗留的问题吧,要是有大神可以解决的话,就帮帮孩子吧


  • 9
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
React AntdTable列表组件中,可以使用日期选择器DatePicker或日期区间选择器RangePicker来实现对时间字段的排序。 首先,在Table的columns属性中,定义一个时间列,设置其排序函数为一个比较日期的函数,例如: ``` const columns = [ { title: '时间', dataIndex: 'time', sorter: (a, b) => new Date(a.time) - new Date(b.time), defaultSortOrder: 'ascend', }, // 其他列... ]; ``` 其中,sorter属性定义了排序的比较函数,该函数将表格的两条记录a和b作为参数传入,然后比较它们的时间字段的大小,返回一个负数、零或正数,分别代表a小于、等于或大于b。 defaultSortOrder属性用于设置默认的排序顺序,默认为升序('ascend'),您可以根据需要自行调整。 然后,在Table的sorter属性中设置排序函数,例如: ``` <Table dataSource={dataSource} columns={columns} onChange={handleChange} /> ``` 其中,dataSource是一个包含数据的数组,columns是Table的列定义,onChange是当排序发生变化时的回调函数。 通过以上设置,您可以在Table的时间列标题上看到一个排序的箭头,单击该列即可按照时间升序或降序排序。 需要注意的是,如果时间字段为字符串类型,可以使用new Date()将其转换为日期对象进行比较。另外,若时间字段在dataSource中更新时需要刷新排序结果,您可以在改变数据源后,调用Table组件的forceUpdate方法强制重新渲染。 希望以上回答能够帮到您,如有不清楚处请您详细描述。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值