用react-resizable插件来拖动改变ant-ui表格的列宽

项目需求：react项目中，做一个可以通过鼠标拖动改变列宽的表格

第一步：安装react-resizable插件

npm install  react-resizable --save

第二步：在项目中封装Resizable组件

Resizable.js

import * as React from "react";
import { Table } from "antd";
import "antd/dist/antd.css";
import { Resizable } from "react-resizable";
import "./resizeable-table.less";class ResizeableTitle extends React.Component {render() {const { onResize, width, onClick, ...restProps } = this.props;if (!width) {return <th {...restProps} />;}return (<Resizablewidth={width}height={0}onResizeStart={() => (this.resizing = true)}onResizeStop={() => {setTimeout(() => {this.resizing = false;});}}onResize={onResize}><thonClick={(...args) => {if (!this.resizing && onClick) {onClick(...args);}}}{...restProps}/></Resizable>);}
}class ResizeableTable extends React.PureComponent {constructor(props) {super(props);this.state = {columns: props.columns};}components = {header: {cell: ResizeableTitle}};componentDidMount() {const handlers = document.querySelectorAll(".react-resizable .react-resizable-handle");handlers.forEach((handler) =>handler.addEventListener("click", (e) => {return false;}));}render() {const columns = this.state.columns.map((col, index) => ({...col,onHeaderCell: (column) => ({width: column.width,onResize: this.handleResize(index)})}));const components = Object.assign({},this.props.components,this.components);return <Table{...this.props}  pagination={false}columns={columns} components={components} />;}handleResize = (index) => (e, { size }) => {e.stopImmediatePropagation();this.setState(({ columns }) => {const nextColumns = [...columns];nextColumns[index] = {...nextColumns[index],width: size.width};return { columns: nextColumns };});};
}export default ResizeableTable;

resizeable-table.less

:global { .react-resizable {position: relative;}.react-resizable-handle {position: absolute;width: 10px;height: 100%;bottom: 0;right: -5px;cursor: col-resize;z-index: 999;}}

第三步：使用Resizable组件

import ResizeableTable from "@app/utils/reactResizable/Resizeable"class AccelerateAll extends Component{...render(){const columns = [...]const tableData= [...]return(<div className="Accelerate-table"> <ResizeableTablescroll={{  y:500 }} //固定表格高度，使用滚动条columns={columns} //表头数据dataSource={tableData} //内容数据/></div>)}
}

用react-resizable插件来拖动改变ant-ui表格的列宽相关推荐

React Ant Design UI 表格时间列格式化代码片段
//导入moment import component from 'moment'{title: '创建时间',dataIndex: 'updatedAt',sorter: true,render: ...
js 实现上下拖动改变父 div 的高度，左右上下拖动动态分割孩子的宽高
1. 需求实现父 div 里面左右,上下动态分割 div,并上下改变父 div 的高度,并且宽和高都是按百分比(如图) . 2. 实现原理 2.1 父布局 <div class='hj-wr ...
ant design pro模板_ant design pro 当中改变ant design 组件的样式和数据管理
ant design pro 简介官网简介 Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续 ...
react 时刻表插件_React“啊哈”的时刻
react 时刻表插件 As a teacher, one of my main goals is to maximize people's "aha" moments. 作为一名 ...
[react] 在React中组件的props改变时更新组件的有哪些方法？
[react] 在React中组件的props改变时更新组件的有哪些方法? 新版用 getDerivedstatefromProps(nextProps){ 业务逻辑} 个人简介我是歌谣,欢迎和大家 ...
android中拖动文字实现功能,Android：图片中叠加文字，支持拖动改变位置
之所以做了这么一个Demo,是因为最近项目中有一个奇葩的需求:用户拍摄照片后,分享到微信的同时添加备注,想获取用户在微信的弹出框输入的内容,保存在自己的服务器上.而事实上,这个内容程序是无法获取的,因 ...
php 页面拖动改变大小,鼠标拖动改变DIV等网页元素的大小的实现方法
1.初次实现 1.1 html代码 div change width by drag div change width by drag 1.2 js代码 var eleLeft = $('#myDiv ...
C# visionpro搜索区域拖动改变事件
C# visionpro搜索区域拖动改变事件 CogRectangle rectangle = null;private void Form1_Load(object sender, EventArg ...
无边框对话框拖动改变大小的实现总结
相同是项目遇到的问题,要求是无边框的对话框要实现鼠标的拖动改变大小.无边框对话框跟有边框的实现肯定不一样喽. 我上网搜到一种方法是: 须要处理下面这三个消息: WM_NCHITTEST WM_SET ...

用react-resizable插件来拖动改变ant-ui表格的列宽

第一步：安装react-resizable插件

第二步：在项目中封装Resizable组件

第三步：使用Resizable组件

用react-resizable插件来拖动改变ant-ui表格的列宽相关推荐

最新文章

热门文章