如何解决element关于table拖拽排序问题

本篇内容介绍了"如何解决element关于table拖拽排序问题"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

最近在使用element table的时候，经常会遇到排序的问题，如果只是简单的排序的话，element官方已经给出了指定的方法

//table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order          //设置sortable属性时出现排序按钮          

但是，element官方组件并不支持拖拽排序，我在这里引入sortablejs实现拖拽排序的功能

sortablejs GitHub地址

//安装sortable.jsInstall with NPM:$ npm install sortablejs --save//在组件内引入import Sortable from 'sortablejs'//为需要拖拽排序的表格添加ref属性//在数据渲染完毕添加拖拽事件created(){   this.getBanner()},methods:{ async getBanner(val){          await apiGetBanner().then((res)=>{               this.bannerTable = res.data.data;          })         this.oldList = this.bannerTable.map(v => v.id);         this.newList = this.oldList.slice();         this.$nextTick(() => {             this.setSort()  //数据渲染完毕执行方法         })    }    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', '')            },           //拖拽结束执行,evt执向拖拽的参数           onEnd: evt => {              //判断是否重新排序              if(evt.oldIndex !== evt.newIndex){                  let data = {                     id:this.bannerTable[evt.oldIndex].id,                     banner_order:evt.newIndex                  }                  //数据提交失败则恢复旧的排序                  apiPutBanner(data).catch(()=>{                     const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];                     this.bannerTable.splice(evt.newIndex, 0, targetRow);                  })              }            }        })    }}

如果需要列拖拽的话，可以参考下面的代码，和上面是一样的原理，在这里我就不赘述了

//行拖拽    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)        }      })    },    //列拖拽    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)        }      })    }

"如何解决element关于table拖拽排序问题"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！