ant design table 表格实现拖拽排序

antd官方文档有支持拖拽的写法,参考地址:https://ant.design/components/table-cn/
根据antd的写法实现了拖拽,但是antd的写法只是实现了功能,对代码没有进行封装,如果你想在多个页面进行拖拽,可能写很多重复代码,所以,本人根据官方文档写法进行了组件化,针对多个页面只需引入即可使用。

1.首先引入支持拖拽的相关插件

 npm install react-dnd --save 
 npm install react-dnd-html5-backend --save
 npm install immutability-helper --save

2.在公共组件目录下新增一个dragTable组件文件,如图:

在这里插入图片描述

3.在dragTable组件中代码如下:

import React, { Component } from 'react';
import { DragSource, DropTarget } from 'react-dnd';

let dragingIndex = -1;

class BodyRow extends React.Component {
  render() {
    const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;
    const style = { ...restProps.style, cursor: 'move' };

    let className = restProps.className;
    if (isOver) {
      if (restProps.index > dragingIndex) {
        className += ' drop-over-downward';
      }
      if (restProps.index < dragingIndex) {
        className += ' drop-over-upward';
      }
    }

    return connectDragSource(
      connectDropTarget(<tr {...restProps} className={className} style={style} />),
    );
  }
}

const rowSource = {
  beginDrag(props) {
    dragingIndex = props.index;
    return {
      index: props.index,
    };
  },
};

const rowTarget = {
  drop(props, monitor) {
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;

    // Don't replace items with themselves
    if (dragIndex === hoverIndex) {
      return;
    }

    // Time to actually perform the action
    props.moveRow(dragIndex, hoverIndex);

    // Note: we're mutating the monitor item here!
    // Generally it's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.
    monitor.getItem().index = hoverIndex;
  },
};

export const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
}))(
  DragSource('row', rowSource, connect => ({
    connectDragSource: connect.dragSource(),
  }))(BodyRow),
);

4.在使用拖拽的TableComponent组件页引入

import { DragableBodyRow } from '@/components/dragTable.component';
//同时需要引入
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';

//在组件TableComponent 加入的方法
 components = {
    body: {
      row: DragableBodyRow,
    },
  };

  moveRow = (dragIndex, hoverIndex) => {
    const { data } = this.state;
    const dragRow = data[dragIndex];
    this.setState(
      update(this.state, {
        data: {
          $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
        },
      }),() => {
        console.log(this.state.data)
      }
    );
  };
//在组件TableComponent 的render函数内 ,Table增加两个方法
<Table 
      rowSelection={rowSelection}
      dataSource={this.state.data} 
      columns={columns(this,match.params.id,match.params.name)} 
      rowKey={rowKey}
      pagination={pagination}
      components={this.components}  //此处为拖拽新增的方法1
      onRow={(record, index) => ({     //此处为拖拽新增的方法2
        index,
        moveRow: this.moveRow,
      })}
      loading={loading}
      onChange={this.onTablePageChange}
 />

5.最后在导出时包裹

export default DragDropContext(HTML5Backend)(TableComponent)

6.拖拽过程中加入的样式,放在对应scss文件内,引入即可

tr.drop-over-downward td {
  border-bottom: 2px dashed #1890ff;
}

tr.drop-over-upward td {
  border-top: 2px dashed #1890ff;
}
  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
实现两个table相互拖拽排序可以使用ant-design-vue的`<a-transfer>`组件。具体实现步骤如下: 1. 使用`<a-transfer>`组件分别渲染两个table,设置`:data-source`和`:target-keys`属性。 ``` <a-transfer :data-source="leftTableData" :target-keys="leftSelectedKeys" :render="item => item.title" :operations="['>', '<']" :list-style="{'width': '200px'}" ></a-transfer> <a-transfer :data-source="rightTableData" :target-keys="rightSelectedKeys" :render="item => item.title" :operations="['>', '<']" :list-style="{'width': '200px'}" ></a-transfer> ``` 2. 监听`change`事件,实现数据的拖拽操作。 ``` <a-transfer :data-source="leftTableData" :target-keys="leftSelectedKeys" :render="item => item.title" :operations="['>', '<']" :list-style="{'width': '200px'}" @change="handleTransferChange" ></a-transfer> <a-transfer :data-source="rightTableData" :target-keys="rightSelectedKeys" :render="item => item.title" :operations="['>', '<']" :list-style="{'width': '200px'}" @change="handleTransferChange" ></a-transfer> ``` ``` methods: { handleTransferChange (nextTargetKeys, direction, moveKeys) { const { leftTableData, rightTableData } = this if (direction === 'right') { const moveData = leftTableData.filter(item => moveKeys.includes(item.key)) this.rightTableData = rightTableData.concat(moveData) this.leftTableData = leftTableData.filter(item => !moveKeys.includes(item.key)) } else if (direction === 'left') { const moveData = rightTableData.filter(item => moveKeys.includes(item.key)) this.leftTableData = leftTableData.concat(moveData) this.rightTableData = rightTableData.filter(item => !moveKeys.includes(item.key)) } } } ``` 3. 根据需要自定义样式和数据源。 完整代码示例: ``` <template> <div> <a-transfer :data-source="leftTableData" :target-keys="leftSelectedKeys" :render="item => item.title" :operations="['>', '<']" :list-style="{'width': '200px'}" @change="handleTransferChange" ></a-transfer> <a-transfer :data-source="rightTableData" :target-keys="rightSelectedKeys" :render="item => item.title" :operations="['>', '<']" :list-style="{'width': '200px'}" @change="handleTransferChange" ></a-transfer> </div> </template> <script> export default { data () { return { leftTableData: [ { key: '1', title: '项目1' }, { key: '2', title: '项目2' }, { key: '3', title: '项目3' }, { key: '4', title: '项目4' } ], rightTableData: [ { key: '5', title: '项目5' }, { key: '6', title: '项目6' }, { key: '7', title: '项目7' }, { key: '8', title: '项目8' } ], leftSelectedKeys: [], rightSelectedKeys: [] } }, methods: { handleTransferChange (nextTargetKeys, direction, moveKeys) { const { leftTableData, rightTableData } = this if (direction === 'right') { const moveData = leftTableData.filter(item => moveKeys.includes(item.key)) this.rightTableData = rightTableData.concat(moveData) this.leftTableData = leftTableData.filter(item => !moveKeys.includes(item.key)) } else if (direction === 'left') { const moveData = rightTableData.filter(item => moveKeys.includes(item.key)) this.leftTableData = leftTableData.concat(moveData) this.rightTableData = rightTableData.filter(item => !moveKeys.includes(item.key)) } } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值