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

最新推荐文章于 2024-07-01 17:20:42 发布

pshdhx_albert

最新推荐文章于 2024-07-01 17:20:42 发布

阅读量6.5k

点赞数

分类专栏：前端开发文章标签： javascript vue.js

本文链接：https://blog.csdn.net/pshdhx/article/details/113513174

版权

前端开发专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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();
},