首页 > 其他分享 >vue+element-ui实现表格的拖拽排序

vue+element-ui实现表格的拖拽排序

时间:2022-11-24 19:39:03浏览次数:44  
标签:vue const log ops tbody element ui evt tableData


import sortable from "sortable.js"; //引入的npm
methods:{
//议题排序
tableSort(){
const tbody = document.querySelector('.el-table_body-wrapper tbody');
console.log('tbody',tbody)
let ops = {
onEnd:(evt)={
const arrsp = this.tableData.splice(evt.oldIndex,1)[0];
this.tableData.splice(evt.newIndex,0,arrsp);
console.log('this.tableData',this.tableData)
this.$forceUpdate();
},
}
sortable.create(tbody,ops);
},
}
watch:{
tableData:{
immediate:false,
handler(){
const tbody = document.querySelector('.el-table_body-wrapper tbody');
console.log(tbody); }
let ops = {
onEnd:(evt)={
const arrsp = this.tableData.splice(evt.oldIndex,1)[0];
this.tableData.splice(evt.newIndex,0,arrsp);
console.log('this.tableData',this.tableData)
this.$forceUpdate();
}
}
sortable.create(tbody,ops);
}
},
mounted(){
this.tableSort();
},

标签:vue,const,log,ops,tbody,element,ui,evt,tableData
From: https://blog.51cto.com/u_15890333/5884598

相关文章