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])
})
}
})
},
分析如图： 向上移根据代码自行脑补