//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}) //排序算法完成,直接将排序好的数据发送给后台
} }); }
}
//大功告成,是不是很简单。