拖拽插件 sortable.js

3,684 阅读1分钟

1.安装

npm i sortablejs

2.使用sortableJs

import Sortable from 'sortablejs'

mounted () {
this.getSortable()
},

//getSortable方法
getSortable () {
  const tbody = document.querySelector('.el-table__body-wrapper tbody')
  const _this = this
  this.sortObj = Sortable.create(tbody, {
  // 可滚动
    scroll: true,
    // 拖拽结束
    onEnd ({ newIndex, oldIndex }) {
      _this.$confirm('请确定是否保存本次排序修改?', '提示', {
        confirmButtonText: '确定提交',
        cancelButtonText: '我再想想',
        type: 'warning'
      }).then(() => {
        if (newIndex !== oldIndex) {
          const currRow = _this.sortTableData.splice(oldIndex, 1)[0]
          _this.sortTableData.splice(newIndex, 0, currRow)
          let sortedIdstr = _this.sortTableData.map(item => {
            return item.productId
          }).join(',')
          console.log(sortedIdstr)
        }
      }).catch(() => {
      // 重新获取表格数据  先清空
        _this.tableData = []
        _this.$nextTick(function () {
          _this.getList()
        })
      })
    }
  })
},

3.销毁

this.sortObj.destroy()