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