How to achieve the effect of dragging rows and rows in element tables
This article is about how to achieve the effect of dragging rows and rows in element tables. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
The element ui table does not have its own drag-and-drop sorting function, so it can only be achieved with the help of the third-party plug-in Sortablejs. Let's take a look at the dynamic diagram to see if the effect is what you want.
First you need to install Sortable.js
Npm install sortablejs-save
And then quote
Import Sortable from 'sortablejs'
It is important to note that element table must specify that the row-key,row-key must be unique, such as ID, otherwise the sorting will be incorrect.
# sample code
{{dropCol}} {{tableData}} import Sortable from 'sortablejs'export default {data () {return {col: [{label:' date', prop: 'date'}, {label:' name', prop: 'name'} {label: 'address', prop: 'address'}], dropCol: [{label:' date', prop: 'date'}, {label:' name', prop: 'name'}' {label: 'address', prop: 'address'}], tableData: [{id:' 1Lane, date: '2016-05-02 lane, name:' Wang Xiaohu 1Qing, address: '100Lane Jinshajiang Road, Putuo District, Shanghai'} {id: '2Qing, date:' 2016-05-04lane, name: 'Wang Xiaohu 2long, address:' 200Lane, Jinshajiang Road, Putuo District, Shanghai'}, {id: '3Qing, date:' 2016-05-01Qing, name: 'Wang Xiaohu 3' Address: 'Lane 300, Jinshajiang Road, Putuo District, Shanghai'}, {id: '414 lane, date:' 2016-05-03 lane, name: 'Wang Xiaohu 4Qing, address: Lane 400, Jinshajiang Road, Putuo District, Shanghai]}} Mounted () {this.rowDrop () this.columnDrop ()}, methods: {/ / Line drag rowDrop () {const tbody = document.querySelector ('.el-table__body-wrapper tbody') const _ this = this Sortable.create (tbody, {onEnd ({newIndex, oldIndex}) {const currRow = _ this.tableData.splice (oldIndex) 1) [0] _ this.tableData.splice (newIndex, 0, currRow)})}, / / column drag columnDrop () {const wrapperTr = document.querySelector ('.el-table__header-wrapper tr') this.sortable = Sortable.create (wrapperTr, {animation: 180, delay: 0 OnEnd: evt = > {const oldItem = this.dropCol [evt.oldIndex] this.dropCol.splice (evt.oldIndex, 1) this.dropCol.splice (evt.newIndex, 0, oldItem)} Thank you for reading! On "how to achieve element table row and column drag effect" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!
