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

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)
    })
  },

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