本篇内容介绍了“如何解决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拖拽排序问题”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。