描述
项目上有个功能需求是拖拽表格列进行一个排序功能实现,然后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>
原文地址:http://www.cnblogs.com/wangchangzhi/p/16857032.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性