react antd 就是包了巧克力的屎

附上自己的解决方案，目前能做到自适应，但是表格下面部分的元素会产生闪烁，比如分页。（顺便求下，有没有 react/antd 交流群，谢谢各位大佬）
```
import { debounce } from "lodash-es";
import { useCallback, useLayoutEffect, useRef, useState } from "react";

export function useTableScroll() {
const [tableHeight, setTableHeight] = useState(600);
const tableContainerRef = useRef<HTMLDivElement>(null);

const calculateTableHeight = useCallback(() => {
const node = tableContainerRef.current?.querySelector(".ant-table-tbody") as HTMLElement;
const nodeRect = node?.getBoundingClientRect() ?? { top: 0 };
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
const pagination = tableContainerRef.current?.querySelector(".ant-pagination") as HTMLElement;
const { top: nodeTop } = nodeRect;
const { height: paginationHeight } = pagination?.getBoundingClientRect() ?? {
height: 0,
};
const { marginTop: paginationMarginTop } = pagination
? (getComputedStyle(pagination) as CSSStyleDeclaration)
: { marginTop: "0px" };

const height = viewportHeight - nodeTop - paginationHeight - Number(paginationMarginTop.replace("px", "")) - 40;
// console.log("[ height ] >", height);
setTableHeight(height);
}, []);

useLayoutEffect(() => {
if (!tableContainerRef.current) return;

const debouncedCalculate = debounce(calculateTableHeight, 100);

// 初次加载时计算一次
debouncedCalculate();

const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.target === tableContainerRef.current) {
debouncedCalculate();
}
}
});

resizeObserver.observe(tableContainerRef.current);

// 清理函数：组件卸载时停止观察
return () => {
resizeObserver.disconnect();
debouncedCalculate.cancel();
};
}, [calculateTableHeight]);

return { scroll: { y: tableHeight }, tableContainerRef };
}

```

那 vue 的 element 岂不是包了屎的一坨翔？

这个问题每次我都直接通过改样式解决了，你这个逻辑有点多余

没事，等你需要升级 ANTD 相关库的时候，就发现踩在屎上继续堆屎了。

@AokiNet 怎么改的朋友，issues 里面的 CSS 方案我试过了没用

@yuhuij 就说表格滚动这个问题，scroll.y 有和没有他的 dom 结构是不一致的，我一般就直接 scroll.y = 'auto', 然后 table 包个类名，dom 一层层 flex 改下去实现，还有楼上那位哥们说的太对了，要升级才是头疼

react 没用过 vue 的 antdv 文档写的也不清晰 好多业务上的需求还改不了，，，蛮头疼的，下个版本准备换成 naiveui 试试

Vue 有什么好用的组件库吗

貌似这个和 react 渲染机制导致的，react 运行时性能感觉不是特别好优化（或者说不够时间优化？），比如你说的这些功能，实际上以前也有做过，但是后面的版本被删掉了。。。想要高性能的表格，可以考虑换 ant s2 ，它就做了你上面说的这些功能

传统的话 vue 就用 element-ui （ plus ）就行，其他的 antdv 和 naive-ui 都有点问题。naiveui 功能多点，还好，不过他整体样式是用 style 实现的（可能不准确，就是和正常的 css 那套有点不一样，看源码很明显），有点创新，不过在 tailwind css 流行的背景下，其实没必要了，搞得还很复杂。antdv 问题很大，别用了。另外 element-ui 有个优势就是源代码很简单，用的 vue sfc 的方式，很容易看懂、修改，不像另外 2 个 tsx 和 手写 render 函数加上什么 vc-component ，style 管理，看得头大。 新的什么 daisyui ，nuxtui 那些没用过，不评价

而且 vue 的表格组件要做到以上的功能，基本也不是 ui 库提供的，都是一个单独的表格组件库做的，ui 库的表格组件也没遇到过功能很全性能比较优秀的。。。

归根结底是 vue 和 react 设计使用理念不一样 而不是 antd 或者 element 的问题

@unhappy224 确实，为了这个问题我去看了 antdv table 的源码，确实头大。另外发现他们的表格是依赖了一个 rc-table 作为基础。

用 aggrid 吧

@unhappy224 #10 “antdv 问题很大”大佬可以展开说一下吗，我刚开一个项目用的 antdv ，目前遇到的一个坑是重写组件样式要去掉 style 的 scope 属性（可能是个别组件），不然无法生效，所以我直接写到了全局样式里了，别的还不清楚有什么坑

antd5 还好，至少遇到问题还有解决方案，antd2 是真难用，而且项目一旦大了，就很难升级到 5 了..

@yuhuij #13 你会发现 antd 整个基本就是 rc 的壳，几乎所有控件最终都会调用 rc-*控件

@liuliancc 首先是不怎么维护了，然后源代码结构非常复杂，还有 vc-component （例如 a-table 就依赖于 vc-table 这个组件），你改个很简单的样式说不定都要绕很久。个人认为组件不太好用，bug 比 element-ui 多。

在用 ng-zorro-antd 的时候也有这种感觉，甚至跟多控件的 API 都不统一，但是没办法

用三方组件库本来就是出于工程的妥协了。
这些所谓基础功能，蚂蚁金服那么多中后台系统都鲜少甚至从未用过。