zhouchijian/fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf[drag-table]:refine the effect && fixed row-key bug

Browse Source
This commit is contained in:
Pan
2017-12-22 11:09:54 +08:00
parent fe25c4d96b
commit cb3578e5c3
1 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/example/table/dragTable.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="app-container calendar-list-container"> <div class="app-container calendar-list-container">
<!-- Note that row-key is necessary to get a correct row order. -->
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> <el-table :data="list" row-key="id" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" label="序号" width="65"> <el-table-column align="center" label="序号" width="65">
<template slot-scope="scope"> <template slot-scope="scope">
@@ -27,9 +27,9 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="80px" label="重要性"> <el-table-column width="100px" label="重要性">
<template slot-scope="scope"> <template slot-scope="scope">
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon> <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="icon-star" :key="n"></svg-icon>
</template> </template>
</el-table-column> </el-table-column>
@@ -45,7 +45,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="拖拽" width="95"> <el-table-column align="center" label="拖拽" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<svg-icon class='drag-handler' icon-class="drag"></svg-icon> <svg-icon class='drag-handler' icon-class="drag"></svg-icon>
</template> </template>
@@ -53,7 +53,7 @@
</el-table> </el-table>
<div class='show-d'>默认顺序 &nbsp; {{ olderList}}</div> <div class='show-d'>默认顺序 &nbsp; {{ oldList}}</div>
<div class='show-d'>拖拽后顺序{{newList}}</div> <div class='show-d'>拖拽后顺序{{newList}}</div>
</div> </div>
@@ -75,7 +75,7 @@ export default {
limit: 10 limit: 10
}, },
sortable: null, sortable: null,
olderList: [], oldList: [],
newList: [] newList: []
} }
}, },
@@ -99,8 +99,8 @@ export default {
this.list = response.data.items this.list = response.data.items
this.total = response.data.total this.total = response.data.total
this.listLoading = false this.listLoading = false
this.olderList = this.list.map(v => v.id) this.oldList = this.list.map(v => v.id)
this.newList = this.olderList.slice() this.newList = this.oldList.slice()
this.$nextTick(() => { this.$nextTick(() => {
this.setSort() this.setSort()
}) })
@@ -109,7 +109,12 @@ export default {
setSort() { setSort() {
const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0] const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
this.sortable = Sortable.create(el, { this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
onEnd: evt => { 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] const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
this.newList.splice(evt.newIndex, 0, tempIndex) this.newList.splice(evt.newIndex, 0, tempIndex)
} }
@@ -119,10 +124,21 @@ export default {
} }
</script> </script>
<style>
.sortable-ghost{
opacity: .8;
color: #fff!important;
background: #42b983!important;
}
</style>
<style scoped> <style scoped>
.icon-star{
margin-right:2px;
}
.drag-handler{ .drag-handler{
width: 30px; width: 20px;
height: 30px; height: 20px;
cursor: pointer; cursor: pointer;
} }
.show-d{ .show-d{