element表格排序的简易方法、插件

//npm或yarn安装并引入sortablejs

import Sortable from "sortablejs";

//重要的一步(element 的表格一定要加上 row-key,后面跟id（唯一标识符），与v-for添加key属性类似)

 <el-table
        :height="TableHeight"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style=" 100%"
        @selection-change="handleSelectionChange"
        stripe
        v-loading="loading"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(199,199, 199, 0.1)"
        row-key="id"
      >
</el-tabel>

//接下来就是使用它的算法进行排序

data(){
return{

tableData:[]    //要改变里面值得表格数据

}
}
//挂载后调用排序方法
mounted(){
this.sortableHandle()

},
methods:{

//排序算法

    sortableHandle() {
      const el = this.$refs.multipleTable.$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      this.sortable = Sortable.create(el, {
        ghostClass: "sortable-ghost",
        setData: function(dataTransfer) {
          dataTransfer.setData("Text", "");
        },
        onEnd: evt => {
          const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
          this.tableData.splice(evt.newIndex, 0, targetRow);
          this.sortTableData = [];
          this.tableData.map((item, index) => {
            this.sortTableData.push({ id: item.id, sort: index });
          });

　　　　　　this.$api.post('/sort/table',{sortTable: this.sortTableData})  //排序算法完成，直接将排序好的数据发送给后台
 } }); }

}    

//大功告成，是不是很简单。