数据排序 antd拖拽排序 记录

官网打开慢问题

antd:
	https://ant-design.gitee.io/index-cn
antd-pro
	https://procomponents.ant.design/docs/getting-started/

编辑表单 排序

方案一：
对表格每行实施编辑 然后保存操作
优点： 引用库少 操作简单
缺点： 输入排序后需要查重
- eg:
实现方案

https://blog.csdn.net/qq_42359718/article/details/125623254?spm=1001.2014.3001.5502

方案二：
拖拽排序
优点： 拖拽排序，交互直观， 数据无需查重
缺点：引用类库 逻辑相对复杂

注意： **所渲染数据中每条数据必定包含index值** 

eg:
以下组件只对数据进行排序 、删除功能 ，不做数据保存
传入： dataSource 数据展示
changeDataSource 数据改变后回调
deleteSupply 删除回调

import { MenuOutlined } from '@ant-design/icons';
import { Table } from 'antd';
import { arrayMoveImmutable } from 'array-move';
import React, { useEffect, useState } from 'react';
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
// import './SortTable.less';

const DragHandle = SortableHandle(() => (
    <MenuOutlined
        style={{
            cursor: 'grab',
            color: '#999',
        }}
    />
));

const SortableItem = SortableElement((props) => <tr {...props} />);
const SortableBody = SortableContainer((props) => <tbody {...props} />);

const SortTable = (fprops) => {
    const { dataSource, changeDataSource, deleteSupply } = fprops;
    const [showData, setDataSource] = useState([]);

    const onSortEnd = ({ oldIndex, newIndex }) => {
        if (oldIndex !== newIndex) {
            const newData = arrayMoveImmutable(showData.slice(), oldIndex, newIndex).filter(
                (el) => !!el,
            );
            changeDataSource(JSON.parse(JSON.stringify(newData)));
        }
    };
    
    const DraggableContainer = (props) => (
        <SortableBody
            useDragHandle
            disableAutoscroll
            helperClass="row-dragging"
            onSortEnd={onSortEnd}
            {...props}
        />
    );
    
    const DraggableBodyRow = ({ className, style, ...restProps }) => {
    // function findIndex base on Table rowKey props and should always be a right array index
        const index = showData.findIndex((x) => x.index === restProps['data-row-key']);
        return <SortableItem index={index} {...restProps} />;
    };

    const columns = [
        {
            title: '',
            width: 50,
            dataIndex: 'sort',
            className: 'drag-visible',
            render: () => <DragHandle />,
        },
        {
            title: '商品编号',
            dataIndex: 'spid',
            key: 'spid',
            width: 120,
            ellipsis: true,
        },
        {
            title: '商品名称',
            dataIndex: 'spname',
            key: 'spname',
            ellipsis: true,
            width: 180,
            render: (text, row) => {
                const { spname } = row;
                return <span title={spname}>{spname}</span>;
            }
        },
      
        {
            title: '操作',
            dataIndex: 'spid',
            key: 'spid',
            render: (text) => {
                return (
                    <a
                        href="#"
                        onClick={() => {
                            deleteSupply(text);
                        }}
                    >删除</a>
                );
            },
            width: 80,
        },
    ];

    useEffect(() => {
        setDataSource(JSON.parse(dataSource));
        changeDataSource(JSON.parse(dataSource));
    }, [dataSource]);

    return (
        <Table
            className="sortTable"
            pagination={false}
            dataSource={showData}
            columns={columns}
            bordered
            rowKey="index"
            components={{
                body: {
                    wrapper: DraggableContainer,
                    row: DraggableBodyRow,
                },
            }}
        />
    );
};

export default SortTable;