拖動紅色區域可以實現行排序

1.下載

npm install sortablejs --save

2.引用

import Sortable from "sortablejs";

3.el-table使用拖拽

<el-table:data="columnTableData":header-cell-style="{background:'#F5F7FA'}"style="width: 100%"size="small"row-key="id"ref="columnTable"><el-table-column label="拖動" width="50px"><template slot-scope="scope"><div class="drag"><i class="fa fa-arrows" aria-hidden="true"></i></div></template></el-table-column><el-table-column prop="title" label="列名"></el-table-column><el-table-column prop="field" label="字段"></el-table-column> </el-table>

4.拖拽后改變數據

created() {this.$nextTick(() => {this.columnDataDrag();});},columnDataDrag() {if (this.$refs.columnTable) {const el1 = this.$refs.columnTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody ")[0];Sortable.create(el1, {disabled: false, // 拖拽不可用? false 啟用ghostClass: "sortable-ghost", //拖拽樣式animation: 150, // 拖拽延時，效果更好看handle: ".drag", // 設置拖拽點onEnd: e => {// 拖拽結束時的觸發let arr = this.columnTableData; // 獲取表數據arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 數據處理，獲取最新的表格數據this.$nextTick(function() {this.columnTableData = arr;// console.log("columnTableData:", this.columnTableData);});}});}}

總結

以上是生活随笔為你收集整理的使用sortablejs实现表格拖拽排序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。