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数量少的话还是会产生滚动条,这是个问题,另一个问题就是数据多的话最后一条线会跟表格的底线这样会很难看(图在下方),这算是遗留的问题吧,要是有大神可以解决的话,就帮帮孩子吧