zdqy_firm_former/src/mixins/sortable.js

import Sortable from 'sortablejs'
/**
 * 组件必须提供一个sortableEnd方法用于拖拽数据更新
 */
export default {
  data() {
    return {
      sortable: null
    }
  },
  methods: {
    // 初始化拖拽排序
    initSortable() {
      // 获取表格的tbody元素
      const el = this.$refs.elTable.$el.querySelectorAll(
        '.el-table__body-wrapper > table > tbody'
      )[0]
      this.sortable = new Sortable(el, {
        // 拖拽时的类名
        ghostClass: 'sortable-ghost',
        // 拖拽动画时间
        animation: 150,
        // 结束拖拽时的回调
        onEnd: this.sortableEnd
      })
    },
    // 重新实例化sortable
    refreshSortable() {
      this.$nextTick(() => {
        if (this.sortable) {
          this.sortable.destroy()
        }
        this.initSortable()
      })
    }
  },
  // 销毁实例
  beforeDestroy() {
    if (this.sortable) {
      this.sortable.destroy()
    }
  }
}