首先百度寻找解决方案,很容易的,我们就找到了
react-resizable
,这个解决方案在antd 3.x 的文档中,
表格 Table - Ant Design
,但是在更高的版本中没有,如果不是百度,我应该永远找不到.
npm install --save react-resizable
官方提供的代码示例:
import { Table } from 'antd';
import { Resizable } from 'react-resizable';
const ResizeableTitle = props => {
const { onResize, width, ...restProps } = props;
if (!width) {
return <th {...restProps} />;
return (
<Resizable
width={width}
height={0}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
<th {...restProps} />
</Resizable>
class Demo extends React.Component {
state = {
columns: [
title: 'Date',
dataIndex: 'date',
width: 200,
title: 'Amount',
dataIndex: 'amount',
width: 100,
title: 'Type',
dataIndex: 'type',
width: 100,
title: 'Note',
dataIndex: 'note',
width: 100,
title: 'Action',
key: 'action',
render: () => <a>Delete</a>,
components = {
header: {
cell: ResizeableTitle,
data = [
key: 0,
date: '2018-02-11',
amount: 120,
type: 'income',
note: 'transfer',
key: 1,
date: '2018-03-11',
amount: 243,
type: 'income',
note: 'transfer',
key: 2,
date: '2018-04-11',
amount: 98,
type: 'income',
note: 'transfer',
handleResize = index => (e, { size }) => {
this.setState(({ columns }) => {
const nextColumns = [...columns];
nextColumns[index] = {
...nextColumns[index],
width: size.width,
return { columns: nextColumns };
});
render() {
const columns = this.state.columns.map((col, index) => ({
...col,
onHeaderCell: column => ({
width: column.width,
onResize: this.handleResize(index),
}),
}));
return <Table bordered components={this.components} columns={columns} dataSource={this.data} />;
ReactDOM.render(<Demo />, mountNode);
css样式
#components-table-demo-resizable-column .react-resizable {
position: relative;
background-clip: padding-box;
#components-table-demo-resizable-column .react-resizable-handle {
position: absolute;
width: 10px;
height: 100%;
bottom: 0;
right: -5px;
cursor: col-resize;
z-index: 1;
css样式需要添加到项目的全局配置中
示例是用class的方式写的,首先我要给他改成函数式组件的形式:
import { Table } from "antd";
import { useState } from "react";
import { Resizable } from 'react-resizable';
const ResizeableTitle = (props:any) => {
const { onResize, width, ...restProps } = props;
if (!width) {
return <th {...restProps} />;
return (
<Resizable
width={width}
height={0}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
<th {...restProps} />
</Resizable>
const initCols = [
title: 'Date',
dataIndex: 'date',
width: 200,
title: 'Amount',
dataIndex: 'amount',
width: 100,
title: 'Type',
dataIndex: 'type',
width: 100,
title: 'Note',
dataIndex: 'note',
width: 100,
title: 'Action',
key: 'action',
render: () => <a>Delete</a>,
const TablePage:React.FC = () => {
const [columns, setColumns] = useState(initCols);
const data = [
key: 0,
date: '2018-02-11',
amount: 120,
type: 'income',
note: 'transfer',
key: 1,
date: '2018-03-11',
amount: 243,
type: 'income',
note: 'transfer',
key: 2,
date: '2018-04-11',
amount: 98,
type: 'income',
note: 'transfer',
return <>
<Table bordered dataSource={data}
components={
header: {
cell: ResizeableTitle
columns={
columns.map((col:any, index:number) => {
return {
...col,
onHeaderCell: (column:any) => ({
width: column.width,
onResize: (e:any, {size}:{size:any}) => {
setColumns((columns) => {
const nextColumns = [...columns];
nextColumns[index] = {
...nextColumns[index],
width: size.width
return nextColumns;
</Table>
export default TablePage;
于是我们便得到一个组件,将以上组件稍加修改,把需要的数据变成属性传递进来,我们便得到一个可复用的,可拖拽列宽的表格.
使用时必须要给column设置width
当表格列很多时,会出现卡顿,不跟鼠标
在搜索列宽拖拽的解决方案时,在ant-design的github 上看到这个
table组件能否支持拖拽调整列宽（伸缩列）？ · Issue #32594 · ant-design/ant-design (github.com)
在下方我又看到这个
yarn add @minko-fe/use-antd-resizable-header
npm add @minko-fe/use-antd-resizable-header
import useARH from '@minko-fe/use-antd-resizable-header';
import '@minko-fe/use-antd-resizable-header/dist/style.css';
function App() {
const columns = [];
const { components, resizableColumns, tableWidth, resetColumns } = useARH({
columns: useMemo(() => columns, []),
columnsState: {
persistenceKey: 'localKey',
persistenceType: 'localStorage',
});
return (
<Table columns={resizableColumns}
components={components} dataSource={data}
scroll={{ x: tableWidth }}></Table>
<ProTable
columns={resizableColumns}
components={components}
dataSource={data}
scroll={{ x: tableWidth }}
></ProTable>
<Button onClick={() => resetColumns()}>重置宽度</Button>
使用比较简单,只需要简单替换数据,即可实现动态拖拽
不能给所有的column设置width,最后一列不能设置,否则将不能拖拽
相比较下, react-resizable在多列时会出现卡顿,use-antd-resizable-header因为没有实时调整,而是松开鼠标后调整,就不会显得非常卡顿,而且写的代码更少,所以我选择use-antd-resizable,但其实都还有比较多的扩展可以实现,不过我是搞后端的,所以就这样吧.
react + antd 实现表格可拖拽列宽前言: 接到一个需求,需要实现表格的表头可以拖拽调节宽度实现方式react-resizable GitHub首先百度寻找解决方案,很容易的,我们就找到了react-resizable,这个解决方案在antd 3.x 的文档中,表格 Table - Ant Design,但是在更高的版本中没有,如果不是百度,我应该永远找不到.安装npm install --save react-resizable使用官方提供的代码示例:import { Ta
react+antd用react-resizable实现Table拖拽调整列宽
npm下载依赖包
npm install --save react-resizable
如果上述报错缺依赖包react-draggable还需要引入react-draggable包，并重启项目
import React, {PureComponent} from 'react';
import { Resizab...
可拖拽：DraggableRow/index.jsx
import React, { useState,useRef } from 'react';
import { Modal, Form, Select, Input, Button, Row, Col,Tooltip} from 'antd'
import { DragDropConte
项目需求中，要求实现表格拖拽排序后，返回排序后数据顺序提交保存，多处使用。
曾尝试通过对Table组件的 columns 属性进行包裹，以期达到封装 DragSource 和 DropTarget 的效果，但后来发现，antd根部不会识别这样的修改。
antd官方文档提供了Table单一表格的行拖拽排序，并没有暴露出更多可详细配置的API。
在拖拽排序的案例中，BodyRow既是DragSource，也是DopTarget。那么既然如此，理应也允许针对BodyRow进行二次封装，达到DragSource与D
记录用户使用的系统配置，缓存浏览器中，记录用户习惯。
1-2.antd换肤（Layout组件未封装）
使用插件实现扩展antd样式文件并绑定cssVariable，通过less.js浏览器在线编译更改更少变量方法实现主题样式更改
@import " _var " ;
:root {
--primary-color : @primary-color ;
--danger-color : red ;
window . less . modifyVars ( vars ) . then ( ( ) => {
if ( vars [ '@primary-color' ] === getItem ( S
React基于antd Table实现可拖拽调整列宽的表格
在日常的工作开发中，会经常的用到表格，进行数据展示，但是数据的长度不一，初始设置的表格列宽不一定符合数据的展示要求，故有时需要手动的进行表格列宽的调整。
用过antd的童鞋，都知道antd的表格并不支持列拖拽功能；那么在react+antd的项目中如何实现可拖动表格呢？
实现功能
1：表格列宽初始自动分配、列宽总和不能超过容器宽度（无
import { Table } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { Resizable } from 'react-resizable';
import './style.css';
const ResizeableTitle = (props: any) => {
const { onResize, width, ...restProps } = props;
一个预打包的版本，其中整个React库位于dist/list.js
此示例显示用户如何处理onReorder和onRemove回调。 控制器负责管理传递到列表中的内容，并使用onReorder和onRemove回调处理列表中的相应事件。
import React from 'react'
import { List , ListItem } from 'react-mutable-list'
class Controller ex
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与后台进行关联实现菜单、用户等权限，若需要，则需进行二次开发。
访问链接：https://blog.csdn.net/weixin_48357332/article/details/124860395
问题描述：
为了向用户展示更丰富的数据，更多的内容，需在展示的列表页中设置列宽可随意拖动。antd官网提供了列宽可拖动的示例，经测试原示例并不好用，且使用有限制，列宽拖拽响应很慢，拖动时会造成其它列宽比较大的变化，针对内容较多的列并不能做到随着列宽的变化，内容也相应增减。
antd现可伸缩列问题展示
1. antd官网示例，当列宽拖动到比内容小时，内容将会出现换行，将行高度撑开
2....
1. 首先，您需要安装Node.js和npm。您可以在 https://nodejs.org/en/ 下载并安装它们。
2. 打开命令行终端并创建一个新的React应用程序。运行以下命令：
npx create-react-app my-app
cd my-app
3. 安装antd和其它相关依赖项。运行以下命令：
npm install antd
npm install @ant-design/icons
npm install craco-less
4. 在应用程序的根目录下创建一个名为craco.config.js的文件，并添加以下内容：
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
这个文件是用来配置craco-less插件的，它可以让我们在应用程序中使用less文件。
5. 在应用程序的src/index.js文件中添加以下代码：
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.less';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
这会在应用程序中引入antd的样式表和我们自己的less文件。
6. 重启应用程序并运行它。在命令行终端中运行以下命令：
npm start
这将启动应用程序并在浏览器中打开它。
现在，您已经成功地安装了react和antd，并且可以在您的应用程序中使用它们了。
