Recently, I encountered dragging data between two tables. Since sorTableJS operates on DOM and does not update data, I manually modify the data after dragging. Note that row-key must be bound to the table, otherwise the internal sorting will be chaotic! (Video demo here)

Based on el – table + sortablejs drag and drop between two forms – kaka – zhihu https://zhuanlan.zhihu.com/p/267865182

The whole code is as follows

<template> <div> <div class="headBox"> <h1> <div class="box"> <div> <el-table border style="width: 390px" :data="table1" ref='leftTable' row-key="id" @row-click='rowClick' > <el-table-column type="index" width="50" > </el-table-column> <el-table-column prop="name" label=" name" width="180" > </el-table-column> <el-table-column prop="age" </el-table-column> </el-table> </div> <div> <el-table border style="width: 390px" ref='rightTable' :data="table2" row-key='id' > <el-table-column type="index" width="50" > </el-table-column> <el-table-column prop="name" label=" name" width="180" > </el-table-column> <el-table-column prop="age" label=" age" width="180" > </el-table-column> </el-table> </div> </div> </div></template><script>import Sortable from 'sortablejs'export default {components: {Sortable}, data() {return {table1: [{name: 'table3 ', age: 18, id: 1}, {name: 'bill', age: 19, id: 2}, {name: 'Cathy' age: 20, id: 3}, {name: 'zhao four' age: 21, id: 4}], table2: []}}, mounted() { const leftTable = this.$refs.leftTable const rightTable = this.$refs.rightTable const leftTabletbody = leftTable.$el.querySelector('tbody') const rightTabletbody = rightTable.$el.querySelector('tbody') this.rowDrop1(leftTabletbody) this.rowDrop2(rightTabletbody) }, methods: { rowClick(row) { row.isSelect = true }, getKey(row) { return row.id }, rowDrop1(dom, target) { const _this = this return Sortable.create(dom, { sort: true, group: { name: 'tableGroup', pull: true, put: True}, onEnd(obj) {const {from, to, newIndex, oldIndex} = obj if (from === to) {console.log(' left ', newIndex), oldIndex) const currRow = _this.table1.splice(oldIndex, 1)[0] _this.table1.splice(newIndex, 0, currRow) } else if (from ! == to) {console.log(' drag from left to right ', newIndex, oldIndex) const currRow = _this.table1.splice(oldIndex, 1)[0] _this.table2.splice(newIndex, 0, currRow) } console.log(_this.table1, _this.table2) } }) }, rowDrop2(dom, target) { const _this = this return Sortable.create(dom, { sort: true, group: { name: 'tableGroup', pull: true, put: OnEnd (obj) {const {from, to, newIndex, OldIndex} = obj if (from === to) {console.log(' drag inside ', newIndex, oldIndex) const currRow = _this.table2.splice(oldIndex, 1)[0] _this.table2.splice(newIndex, 0, currRow) } else if (from ! == to) {console.log(' drag from right to left ', newIndex, oldIndex) const currRow = _this.table2.splice(oldIndex, 1)[0] _this.table1.splice(newIndex, 0, currRow) } console.log(_this.table1, _this.table2) } }) } }}</script><style scoped>.headBox{ margin-top: 30px; font-size: 40px; color: red; }.box { margin: 100px; display: flex; justify-content: space-around; }</style>Copy the code