password
查看人数
type
status
date
slug
summary
category
icon
tags
作者
状态
Ant Design Vue 3.0 的 a-table 组件在Pro版本中提供了拖动排序的功能,但是在免费版中并未包含。不过a-table 提供了 customRow 属性,通过这个入口我们可以自己实现拖动排序。下面我会分享具体的代码实现。
代码示例
使用 customRow 处理拖放事件
要实现拖动排序,首先需要通过 customRow 为每一行添加拖放事件的处理:
在拖动开始保存当前项和索引,拖动经过阻止默认事件,最后在拖动结束时交换两个索引位置上的项,这样就可以改变顺序。
处理数据和更新视图
然后需要在数据层面上交换顺序,并触发视图更新:
直接修改数组会导致视图不更新,需要生成一个新数组来触发响应式。
有关使用上的问题，欢迎您在底部评论区留言，一起交流~
- 作者:躁静有徒
- 链接:https://blog.zaojingyoutu.top//article/49dc20bb-2180-47c2-a115-06d4a5d01579
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章