表格拖拽 拖拽排序 sortablejs插件

前言

我们开发后台的时候经常要做表格，有时候要对表格对一些其他的操作，今天我们是用sortablejs插件来实现我们的表格拖拽排序

1、首先要下载我们需要用到的插件

 npm install sortablejs

2、在使用的页面引入我们的插件

import Sortable from "sortablejs"; 

3、在表格上绑定ref

ref="singleTable"

4、定义我们的表格数组

data() {
    return {
        panList:[],
    };
  },

5、写操作逻辑

mounted() {
    this.dragSort();
  },
  methods: {
   sortableTable() {  
        const el = this.$refs.singleTable.$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      Sortable.create(el, {  
        animation: 150,  
        onEnd: ({ newIndex, oldIndex }) => {  
          const movedItem = this.tableData.splice(oldIndex, 1)[0];  
          this.tableData.splice(newIndex, 0, movedItem);  
        },  
      });  
    },   
  },

6、这样就大功告成了