脚本宝典收集整理的这篇文章主要介绍了浅谈element关于table拖拽排序问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
最近在使用element table的时候，经常会遇到排序的问题，如果只是简单的排序的话，element官方已经给出了指定的方法
//table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order
<el-table :data="tableData" :default-sort="{PRop: 'ID', order: 'descending'}">
//设置sortable属性时出现排序按钮
<el-table-column prop="ID" label="座号" sortable>
</el-table>
但是，element官方组件并不支持拖拽排序，我在这里引入sortablejs实现拖拽排序的功能
sortablejs GitHub地址
//安装sortable.js Install wITh NPM: $ npm install sortablejs --save //在组件内引入 import Sortable From 'sortablejs' //为需要拖拽排序的表格添加ref属性 <el-table ref="DragTable"> //在数据渲染完毕添加拖拽事件 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拖拽排序问题的文章就介绍到这了,更多相关element table拖拽排序内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的浅谈element关于table拖拽排序问题全部内容，希望文章能够帮你解决浅谈element关于table拖拽排序问题所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。