1、安装依赖
npm install --save react-resizable
2、App.js
import { useState, useEffect } from 'react';import { Table, Tag, Space } from 'antd';
import { Resizable } from 'react-resizable';import './App.css';const defaultColumns = [{title: 'Name',dataIndex: 'name',key: 'name',render: text => <a>{text}</a>,},{title: 'Age',dataIndex: 'age',key: 'age',},{title: 'Address',dataIndex: 'address',key: 'address',},{title: 'Tags',key: 'tags',dataIndex: 'tags',render: tags => (<>{tags.map(tag => {let color = tag.length > 5 ? 'geekblue' : 'green';if (tag === 'loser') {color = 'volcano';}return (<Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>);})}</>),},{title: 'Action',key: 'action',render: (text, record) => (<Space size="middle"><a>Invite {record.name}</a><a>Delete</a></Space>),},
];const data = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer'],},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park',tags: ['loser'],},{key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park',tags: ['cool', 'teacher'],},
];const App = () => {const [dcolumns, setDcolumns] = useState([]);const [components, setComponents] = useState({});useEffect(() => {setDcolumns(defaultColumns);setComponents({header: {cell: ResizeableTitle}});}, []);const ResizeableTitle = (props) => {console.log('props', props);const { onResize, width=100, ...restProps } = props;if ( !width ) {return <th {...restProps} />}return (<Resizable width={width} height={0} onResize={onResize}><th {...restProps} /></Resizable> )}const handleResize = index => (e, { size }) => {console.log('size', size);const nextColumns = [...columns];nextColumns[index] = {...nextColumns[index],width: size.width}setDcolumns(nextColumns);};const columns = dcolumns.map((col, index) => ({...col,onHeaderCell: column => ({width: col.width || 100, // 100 没有设置宽度可以在此写死 例如100试下onResize: handleResize(index),}),}));return (<div className="container"><Tablecomponents={components}columns={columns}dataSource={data} /></div>)
}export default App;
3、App.css
.container{border: 2px solid skyblue;margin: 100px ;
}.react-resizable {position: relative;}.react-resizable-handle {position: absolute;width: 20px;height: 20px;background-repeat: no-repeat;background-origin: content-box;box-sizing: border-box;background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');background-position: bottom right;padding: 0 3px 3px 0;}.react-resizable-handle-sw {bottom: 0;left: 0;cursor: sw-resize;transform: rotate(90deg);}.react-resizable-handle-se {bottom: 0;right: 0;cursor: se-resize;}.react-resizable-handle-nw {top: 0;left: 0;cursor: nw-resize;transform: rotate(180deg);}.react-resizable-handle-ne {top: 0;right: 0;cursor: ne-resize;transform: rotate(270deg);}.react-resizable-handle-w,.react-resizable-handle-e {top: 50%;margin-top: -10px;cursor: ew-resize;}.react-resizable-handle-w {left: 0;transform: rotate(135deg);}.react-resizable-handle-e {right: 0;transform: rotate(315deg);}.react-resizable-handle-n,.react-resizable-handle-s {left: 50%;margin-left: -10px;cursor: ns-resize;}.react-resizable-handle-n {top: 0;transform: rotate(225deg);}.react-resizable-handle-s {bottom: 0;transform: rotate(45deg);}
4、效果预览
