sortablejs配合elementui table使用

1.先呈現代碼

    // 行拖拽

    handleRowDrop() {

      const tbody = document.getElementById('configModelTable').querySelector('.el-table__body-wrapper tbody')

      Sortable.create(tbody, {

        handle: '.my-handle',

 

        onEnd: ({ newIndex, oldIndex }) => {

          const newArray = []

          // 向下移

          if (newIndex > oldIndex) {

            // 遍歷得到全部的需要重新排序的項

            for (let i = 0; i < newIndex - oldIndex; i++) {

              newArray.push({ id: this.paramsTempTableList[oldIndex + 1 + i].id, rank: oldIndex + 1 + i, editor: localStorage.getItem('userId') })

            }

            newArray.push({ id: this.paramsTempTableList[oldIndex].id, rank: newIndex + 1, editor: localStorage.getItem('userId') })

          }

 

          // 向上移

          if (newIndex < oldIndex) {

            newArray.push({ id: this.paramsTempTableList[oldIndex].id, rank: newIndex + 1, editor: localStorage.getItem('userId') })

            for (let i = 0; i < oldIndex - newIndex; i++) {

              newArray.push({ id: this.paramsTempTableList[newIndex + i].id, rank: newIndex + 2 + i, editor: localStorage.getItem('userId') })

            }

          }

          this.$nextTick(() => {

        // 重新請求列表

            this.$store.dispatch('resourceBzTempParamsConfig/sortBusinessParas', [...newArray])

          })

        }

      })

    },

 

分析如圖： 向上移根據代碼自行腦補