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="width: 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})  //排序算法完成，直接將排序好的數據發送給后台
 } }); }

}    

//大功告成，是不是很簡單。