Kendo 反应网格边框未对齐

Question

有时，当在 css 中添加边框（如下所示）以使每列都有垂直边框时，Kendo 反应网格会错位一个像素。当你调整大小时它就恢复正常了。

.k-grid .k-table-th, .k-grid td, .k-grid .k-table-td {
    border-left: 1px solid #dee2e6; 
}

有什么办法可以解决这个问题？

尝试对齐它，但我认为它需要调整大小功能。

Answer 1

//#region new approach grid-sizing
 const gridRef = useRef();

    const ADJUST_PADDING = 2;
    const COLUMN_MIN = 2;
    let grid = gridRef;
    const [applyMinWidth, setApplyMinWidth] = React.useState(false);
    const [gridCurrent, setGridCurrent] = React.useState(0);
    const minGridWidth = React.useRef(0);
    useEffect(() => {
        grid.current = document.querySelector(".k-grid");
        window.addEventListener("resize", handleResize);
        columns.map((item) =>
            item.minWidth !== undefined ? (minGridWidth.current += item.minWidth) : minGridWidth.current
        );
        setGridCurrent(grid.current.offsetWidth);
        setApplyMinWidth(grid.current.offsetWidth < minGridWidth.current);
    }, []);

    const handleResize = () => {
        if (grid.current === null) return;
        if (typeof grid.current.offsetWidth === undefined || grid.current.offsetWidth === null) return;
        if (grid.current.offsetWidth < minGridWidth.current && !applyMinWidth) {
            setApplyMinWidth(true);
        } else if (grid.current.offsetWidth > minGridWidth.current) {
            setGridCurrent(grid.current.offsetWidth);
            setApplyMinWidth(false);
        }
    };
    const setWidth = (minWidth) => {
        minWidth === undefined ? (minWidth = 0) : null;
        let width = applyMinWidth ? minWidth : minWidth + (gridCurrent - minGridWidth.current) / columns.length;
        width < COLUMN_MIN ? width : (width -= ADJUST_PADDING);
        return width;
    };
    //#endregion

.k-grid .k-table-th, .k-grid td, .k-grid .k-table-td {
    border-left: 1px solid #dee2e6; 
}

.k-grid table tbody tr td {
    border-bottom: 1px solid #ebedf0 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>