锐客网

  1. 首页 > it技术 > >

浅谈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 = https://www.it610.com/article/{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 = thisSortable.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拖拽排序问题的文章就介绍到这了,更多相关element table拖拽排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

    推荐阅读


    上一篇：每日推荐05.28

    下一篇：Vue实现div滚轮放大缩小