vue sortablejs实现table或列表拖拽效果

最新推荐文章于 2025-06-09 18:08:15 发布

小猫咪的憨憨

最新推荐文章于 2025-06-09 18:08:15 发布

阅读量751

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/kannizhuangbi/article/details/109311143

本文介绍如何使用sortablejs实现Vue项目中Ant Design表格的行拖拽排序功能。具体步骤包括安装sortablejs、在组件内引入并创建拖拽实例，通过自定义函数监听拖拽结束事件并更新表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue antd table 拖拽

第一步

安装sortablejs

npm install sortablejs --save

第二步

组件内引入sortablejs

import Sortable from 'sortablejs'

第三步

methods内写入函数

    rowDrop() {
      const tbody = document.querySelector('.ant-table-body tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },

.ant-table-body tbody选中的表格
tableData为表格数据源

第四步

mountde内调用函数

  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.rowDrop()
      }, 100)
    })
  },

以上四步完成完成即可实现