react antd实现表格列头拖拽排序

描述

项目上有个功能需求是拖拽表格列进行一个排序功能实现，然后antd的文档中只有行拖拽实现，列拖拽则没有，所以只好自己找方法实现

思路

通过antd的头部行属性onHeaderRow设置使用原生js的拖拽功能获取到拖拽的起始位置和最终位置，再由方法去修改表头顺序，从而实现拖拽表头更换位置功能

步骤一

设置useState

// 表头，从而能动态触发更新
const [columns,setColumns] = useState<any>([{dataIndex:'a',key='a',title:'a'},{dataIndex:'b',key='b',title:'b'},{dataIndex:'c',key='c',title:'c'}])
// 拖拽起始位置
const [endIndex,setEndIndex] = useState<number>([])
const [dataSource,setDataSource] = useState<any>([{a:'a',b:'b',c:'c'}])

步骤二

设置表头变更方法

const columnsIndexChange = (startIndex: number) => {
        if (endIndex >= 0 && startIndex != endIndex) {
            var tempColumns = [...columns]
            var temp = tempColumns[startIndex]
            tempColumns?.splice(startIndex, 1)
            tempColumns?.splice(endIndex, 0, temp)
            setColumns(tempColumns)
        }
    }

步骤三

表格处设置

<Table columns={columns} dataSource={dataSource} onHeaderRow={(columns: any, index: number) => {
            return {
                onDragOver: (e: any) => {
                    if (e.preventDefault) {
                        e.preventDefault();
                    } else {
                        e.returnValue = false;
                    }
                },
                onDragEnd: (e: any) => {
                  //鼠标松开后触发持剑
                    columnsIndexChange(e.target.cellIndex)
                },
                onDragEnter: (e: any) => {
                  //设置表格可拖拽和拖拽截止位置
                    if (e.preventDefault) {
                        e.preventDefault();
                    } else {
                        e.returnValue = false;
                    }
                    // if判断是为了解决鼠标移出和移到文字上导致获取不到cellIndex
                    if (e.target.cellIndex >= 0) {
                        setEndIndex(e.target.cellIndex)
                    }
                },
            };
        }}>
</Table>