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)
When I was studying CSS recently, I found that I ...
Table of contents 1. Deconstruction Tips 2. Digit...
Original Intention The reason for making this too...
Equal height layout Refers to the layout of child...
1. Add a user . First, use the adduser command to...
Table of contents No slots Vue2.x Slots With slot...
1. Use css sprites. The advantage is that the smal...
Sometimes when requesting certain interfaces, you...
Detailed explanation and examples of database acc...
Table of contents Preface Creation steps Create a...
First, let me introduce how to install PHP on Cen...
This article example shares the specific code of ...
Use indexes to speed up queries 1. Introduction I...
1.MySQL multiple instances MySQL multi-instance m...
Use Javascript to implement a message board examp...