The element ui table does not have a built-in drag-and-drop sorting function, and can only be implemented with the help of a third-party plug-in, Sortablejs. Let's take a look at the dynamic picture first to see if the effect is what you want. First you need to install Sortable.js npm install sortablejs --save Then quote import Sortable from 'sortablejs' It should be noted that the element table must specify a row-key, which must be unique, such as an ID, otherwise incorrect sorting will occur. ###Sample code <template> <div style="width:800px"> <el-table :data="tableData" border row-key="id" align="left"> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label"> </el-table-column> </el-table> <pre style="text-align: left"> {{dropCol}} </pre> <hr> <pre style="text-align: left"> {{tableData}} </pre> </div> </template> <script> 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: '1', date: '2016-05-02', name: '王小虎1', address: 'No. 100, Jinshajiang Road, Putuo District, Shanghai' }, { id: '2', date: '2016-05-04', name: '王小虎2', address: 'No. 200, Jinshajiang Road, Putuo District, Shanghai' }, { id: '3', date: '2016-05-01', name: '王小虎3', address: 'No. 300, Jinshajiang Road, Putuo District, Shanghai' }, { id: '4', date: '2016-05-03', name: '王小虎4', address: 'No. 400, Jinshajiang Road, Putuo District, Shanghai' } ] } }, mounted() { this.rowDrop() this.columnDrop() }, methods: { //Row 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) } }) } } } </script> <style scoped> </style> This concludes this article about the implementation examples of dragging rows and columns in element tables. For more relevant content on dragging rows and columns in element tables, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: How to set Nginx log printing post request parameters
>>: Summary of the use of html meta tags (recommended)
1. Check the maximum number of open files in the ...
Table of contents 1. Props Parent >>> Ch...
This article uses examples to describe how to cre...
Win10 installs mysql5.7 decompressed version, for...
During the work development process, a requiremen...
download Download address: https://redis.io/downl...
Prepare: Define a teacher table and a student tab...
Preface Linux's file permission management is...
The final effect is as follows: The animation is ...
Question 1: How do you instruct the browser to dis...
CAST function In the previous article, we mention...
1. Yum installation yum install subversion 2. Con...
Deepin 2014 download and installation For downloa...
Table of contents 1. What is Promise? 2. Why is t...
Table of contents 1. Background 2. Verification p...