vue的el-table使用拖拽排序sortable

import Sortable from 'sortablejs'

  //sortable拖拽组件
  drag() {
      const el = document.querySelectorAll(
        '.el-table__body-wrapper > table > tbody'
      )[0]
      this.sortable = Sortable.create(el, {
        disabled: !this.sortActive, // 拖拽不可用? false 启用
        ghostClass: 'sortable-ghost', // 拖拽样式
        animation: 400, // 拖拽延时,效果更好看
        onEnd: (e) => {
          // 拖拽结束时的触发
          const arr = this.list // 获取表数据
          arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]) // 数据处理,获取最新的表格数据
          this.$nextTick(function() {
            this.list = arr
          })
          this.list.forEach((element, index) => {
            element.orderNo = index
          })
          this.sortList(this.list)
        }
      })
      this.sorTable
    },

    // 点击拖拽按钮
    sortRightlist() {
      this.sortable.destroy()//销毁拖拽
      this.sortActive = !this.sortActive
      this.drag()
    },

你可能感兴趣的:(vue.js,javascript,前端,elementui)