From cb3578e5c33da15e80699aab94af5e3017aed9a7 Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 22 Dec 2017 11:09:54 +0800 Subject: [PATCH] perf[drag-table]:refine the effect && fixed row-key bug --- src/views/example/table/dragTable.vue | 38 +++++++++++++++++++-------- 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/src/views/example/table/dragTable.vue b/src/views/example/table/dragTable.vue index 9eb16f7c..8907ed83 100644 --- a/src/views/example/table/dragTable.vue +++ b/src/views/example/table/dragTable.vue @@ -1,7 +1,7 @@ - + @@ -53,7 +53,7 @@ -
默认顺序   {{ olderList}}
+
默认顺序   {{ oldList}}
拖拽后顺序{{newList}}
@@ -75,7 +75,7 @@ export default { limit: 10 }, sortable: null, - olderList: [], + oldList: [], newList: [] } }, @@ -99,8 +99,8 @@ export default { this.list = response.data.items this.total = response.data.total this.listLoading = false - this.olderList = this.list.map(v => v.id) - this.newList = this.olderList.slice() + this.oldList = this.list.map(v => v.id) + this.newList = this.oldList.slice() this.$nextTick(() => { this.setSort() }) @@ -109,7 +109,12 @@ export default { setSort() { const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0] this.sortable = Sortable.create(el, { + ghostClass: 'sortable-ghost', // Class name for the drop placeholder, onEnd: evt => { + const targetRow = this.list.splice(evt.oldIndex, 1)[0] + this.list.splice(evt.newIndex, 0, targetRow) + + // for show the changes, you can delete in you code const tempIndex = this.newList.splice(evt.oldIndex, 1)[0] this.newList.splice(evt.newIndex, 0, tempIndex) } @@ -119,10 +124,21 @@ export default { } + +