一：单独使用，只实现拖拽变换列位置

import React from 'react';
import { Table } from 'antd';
import ReactDragListView from 'react-drag-listview'class DragTable extends React.Component {constructor(props) {super(props);this.state = {columns: this.props.columns}}static getDerivedStateFromProps(nextProps, prevState) {return null;}render() {const { components, columns, ...others } = this.props;const that = this;const dragProps = {onDragEnd(fromIndex, toIndex) {const columns = [...that.state.columns];const item = columns.splice(fromIndex, 1)[0];columns.splice(toIndex, 0, item);that.setState({columns});},nodeSelector: "th"};return (<ReactDragListView.DragColumn {...dragProps}><Table columns={this.state.columns}{ ...others }></Table></ReactDragListView.DragColumn>)}
}export default DragTable;

二：与react-resizable结合使用，可改变列宽，可改变列位置

react-resizable可参Ant Design + react-resizable实现列表页可拖拽宽度变化_仗剑走天涯的博客-CSDN博客

DragTable 组件封装：

import React from 'react';
import { Table } from 'antd';
import { Resizable } from 'react-resizable';
import ReactDragListView from 'react-drag-listview'
import 'react-resizable/css/styles.css';
import './index.css'const ResizeableTitle = (props) => {const { onResize, width, ...restProps } = props;if (!width) {return <th {...restProps} />;}return (<Resizablewidth={width?width:null}height={0}minConstraints={[50, 50]}onResize={onResize}draggableOpts={{ enableUserSelectHack: false }}><th {...restProps} /></Resizable>);
}class DragTable extends React.Component {constructor(props) {super(props);this.state = {columns: this.props.columns}}static getDerivedStateFromProps(nextProps, prevState) {return null;}components = {header: {cell: ResizeableTitle,},};handleResize = index => (e, { size }) => {this.setState(({ columns }) => {const nextColumns = [...columns];nextColumns[index] = {...nextColumns[index],width: size.width?size.width:'100%',};return { columns: nextColumns };});}render() {const { components, columns, ...others } = this.props;const that = this;const dragProps = {onDragEnd(fromIndex, toIndex) {const columns = [...that.state.columns];const item = columns.splice(fromIndex, 1)[0];columns.splice(toIndex, 0, item);that.setState({columns});},nodeSelector: "th",handleSelector: 'p'};const newColumns = this.state.columns.map((col, index) => ({...col,onHeaderCell: column => ({width: column.width?column.width:100, // 100 没有设置宽度可以在此写死 例如100试下onResize: this.handleResize(index),}),})) return (<ReactDragListView.DragColumn {...dragProps}><Table components={this.components}columns={newColumns}{ ...others }></Table></ReactDragListView.DragColumn>)}
}export default DragTable;

样式调整

.react-resizable-handle-se {top: 0;right: 0;cursor: w-resize;
}.react-resizable-handle {position: absolute;width: 10px;height: calc(100% - 10px);background-repeat: no-repeat;background-origin: content-box;box-sizing: border-box;background-image: none;background-position: bottom right;border-right: 1px solid #f0f0f0;margin: 5px 0px;padding: 0px;
}.ant-table-header .ant-table-cell p {width: calc(100% - 15px);cursor: move;margin-left: 5px;
}.ant-table thead > tr > th {margin-right: 10px;
}.ant-table-header {-moz-user-select:none; /* Firefox私有属性 */-webkit-user-select:none; /* WebKit内核私有属性 */-ms-user-select:none; /* IE私有属性(IE10及以后) */-khtml-user-select:none; /* KHTML内核私有属性 */-o-user-select:none; /* Opera私有属性 */user-select:none; /* CSS3属性 */
}.ant-table-header th:last-child .react-resizable-handle {display: none;
}

使用：

import React from 'react';
import DragTable from '../../components/DragTable';class APP extends React.Component {constructor(props) {super(props);this.state = {loading: false,data: []}}render() {const columns = [{ title: () => { return <p>name</p> }, dataIndex: 'name', key: 'name', ellipsis: true },{ title: () => { return <p>value</p> }, dataIndex: 'value', key: 'value', ellipsis: true }]return (<DragTable columns={columns}loading={this.state.loading}rowKey='id'dataSource={this.state.data}size='small'pagination={false}style={{marginTop: 10}}rowClassName={(record, index) => {}}></DragTable>);}
}

Ant Design + react-drag-listview实现Table拖拽变换列位置相关推荐

Ant Design + react-resizable实现列表页可拖拽宽度变化
Ant Design + react-resizable实现列表页可拖拽宽度变化查找了下Ant Design中的Table组件,没有发现表格header列头可以拖拽实现宽度变化的功能,领导要想要这种 ...
ant design vue利用rowClassName给table添加行样式
ant design vue利用rowClassName给table添加行样式目录 1. 需求:表格每行数据hasVerdict值不为'1'时标红显示 2. 实现方式:table属性rowClass ...
android ListView和GridView拖拽移位具体实现及拓展
关于ListView拖拽移动位置,想必大家并不陌生,比较不错的软件都用到如此功能了.如:搜狐,网易,百度等,但是相比来说还是百度的用户体验较好,不偏心了,下面看几个示例: 首 ...
iview table 自定义列_案例 | iview中Table：拖拽适配列、自定义固定列、合并行
文 / 景朝霞来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing ❥❥❥❥点个赞,让我知道你来过~❥❥❥❥ 0 / 更新Table "iview": &quo ...
HTML 锁定表格首行首列、拖拽表格列宽
摘自:http://s.yanghao.org/program/viewdetail.php?i=61717 因为与自己的实际情况有些不同,简单的改造了下...如果有版权问题,请留言... 锁定Tab ...
Element UI表格拖拽（vue中） —— 行拖拽、列拖拽
目录安装依赖 vuedraggable 实现拖拽的要点行拖拽要点列拖拽要点完整范例代码安装依赖 vuedraggable 安装 vuedraggable 的同时,会自动安装 sortabl ...
Vue2 + ant design vue1.7.8版本 Table组件手动拖拽、可伸缩列功能
低版本的antd table组件官网文档上有可伸缩列功能,但是用起来有很明显的bug,无法直接拿来用:接下来给大家提供一个手写的拖拽方案: 1.首先,写好v-table组件,这里最重要的就是tabl ...
弹窗案例实现（Ant Design + React hooks）
Ant Design 是React里常用的UI框架我们选用的是Ant Design 的 Modal 我们可以从Ant Design 官网看到一个基本的弹框大致长这个样子一个弹框,大概需要弹框名称, ...
React基于antd Table实现可拖拽调整列宽的表格
实现功能 1:表格列宽初始自动分配.列宽总和不能超过容器宽度(无横向滚动条,公司项目特殊需求) 2:当容器宽度变化时,保持当前列宽的分配比例,等比缩小 3:拖动过程中不进行列宽的调整,只有释放之后再进 ...

Ant Design + react-drag-listview实现Table拖拽变换列位置

一：单独使用，只实现拖拽变换列位置

二：与react-resizable结合使用，可改变列宽，可改变列位置

react-resizable可参Ant Design + react-resizable实现列表页可拖拽宽度变化_仗剑走天涯的博客-CSDN博客

Ant Design + react-drag-listview实现Table拖拽变换列位置相关推荐

最新文章

热门文章