react + antd 实现表格的列宽可变，数据量大时页面刷新不卡顿

洐然

于 2021-10-28 09:23:25 发布

阅读量1.8k

点赞数 7

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_48192626/article/details/121006872

版权

本文介绍如何在React应用中结合Ant Design库，实现表格列宽的动态拖拉调整功能。在操作过程中，行头会显示虚线指示拖动位置，并确保在大量数据下页面刷新时仍保持流畅不卡顿。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有需求需要实现表格的列宽拖拉可变，在开始拖拉和放下的过程中在行头显示一条虚线表标明位置，鼠标释放后刷新表格。

上代码！

1. 拖拉传参组件代码

import { FC, useState } from 'react'
import { Resizable } from 'react-resizable'
// 引入react-resizable npm i xxx 或 yarn add xxx
import { deBounce } from '@/utils/utilConvenrt'
// 防抖函数，不是一定需要，目的：更新偏移量不要实时更新
import classnames from 'classnames'

const ResizableTitle: FC<any> = (props) => {
  const { onResize, width, ...restProps } = props;

  // 添加偏移量
  const [offset, setOffset] = useState<number>(0)

  if (!width) {
    return <th {...restProps} />
  }

  return (
    <Resizable
      width={Number(width) + Number(offset)}
      height={0}
      handle={
        <span
          // 有偏移量显示竖线
          className={classnames(['react-resizable-handle', offset && 'active'])}
          // 拖拽层偏移
          style={
  { tra

最低0.47元/天解锁文章