el-table拖动排序，使用Sortable.js，el-table一定要加row-key

Sortable.js使用可参考文档sortable.js sort属性是否允许组内排序 - itxst.com

  一要给 el-table 加 row-key="sort"，值一定要是唯一的，就因为忘记加这个了，排序一直不生效/(ㄒoㄒ)/~~

 

   <el-table :data="list" id="sortExample" :key="randomKey" row-key="sort">
     ........
  </el-table>

引入依赖

  import Sortable from 'sortablejs';   

 单独写一个初始化排序的方法

  initSort() {
      this.$nextTick(() => {
        const example1 = document.getElementById('sortExample').querySelector('.el-table__body-wrapper tbody');;
        const _this = this;
        Sortable.create(example1, {
          draggable: '.el-table__row', //指定样式类的元素才允许拖动
          animation: 800,//过渡动画时间
          //拖拽结束时事件
          onEnd: function (evt) {
            const { newIndex, oldIndex } = evt;
            //实时更换list中的数据
            const currRow = _this.list.splice(oldIndex, 1)[0];
            _this.list.splice(newIndex, 0, currRow);
          },
        });
      })
    },

在获取到el-table的数据时调用初始化排序的方法

  getList() {
      //....
      getCellList(data).then((res) => {
          this.list= res.data.List;
          if (this.list!= null && this.list.length > 0) {
            //在获取el-table的数据后调用initSort方法
            this.initSort();
          }
      });
    },