Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to solve the table drag-and-drop sorting problem of element". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Recently, when using element table, we often encounter the problem of sorting. If it is only a simple sorting, the element official has given a specified method.

/ / the default sorting mode of table is to sort in decreasing order according to ID. This can be changed to something else, such as the sort button when the order / / sets the sortable property.

However, the official element component does not support drag-and-drop sorting. I introduce sortablejs to implement drag-and-drop sorting here.

Sortablejs GitHub address

/ / install sortable.jsInstall with NPM:$ npm install sortablejs-- save// introduces import Sortable from 'sortablejs'// into the component to add ref attributes to tables that require drag sorting / / add drag events created () {this.getBanner ()}, methods: {async getBanner (val) {await apiGetBanner (). Then ((res) = > {this.bannerTable = res.data.data) after data rendering. }) this.oldList = this.bannerTable.map (v = > v.id); this.newList = this.oldList.slice () This.$nextTick (() = > {this.setSort () / / data rendering method})} setSort () {const el = this.$refs.dragTable.$el.querySelectorAll ('.el-table__body-wrapper > table > tbody') [0] This.sortable = Sortable.create (el, {/ / Class name for the drop placeholder, ghostClass: 'sortable-ghost', setData: function (dataTransfer) {dataTransfer.setData (' Text',')}, / / drag to end execution Evt drag parameter onEnd: evt = > {/ / determine whether to reorder if (evt.oldIndex! = = evt.newIndex) {let data = {id: this.bannerTable [evt.oldIndex] .id Banner_order:evt.newIndex} / / restore the old sort apiPutBanner (data) if the data submission failed. Catch () = > {const targetRow = this.bannerTable.splice (evt.oldIndex, 1) [0] This.bannerTable.splice (evt.newIndex, 0, targetRow);})})}

If you need column drag and drop, you can refer to the following code, which is the same principle as above, so I won't repeat it here.

/ / 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)}})} "how to solve element's table drag-and-drop sorting problem" ends here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.