项目上有个功能需求是拖拽表格列进行一个排序功能实现,然后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>