Vue+ElementUi项目实现表格-单行拖拽

Posted 2021-02-18 pengzhao-mr

最近在项目的中用到了表格单行拖拽的功能，当时直接复制粘贴别人的代码，今天有时间再回头看看：

首先VUE + ELEMENT+SORTABLEJS 准备好，对应的是以下版本    

 1.   "element-ui": "^2.13.2"

 2.   "vue": "^2.5.2"

 3.   "sortablejs": "^1.10.2"

 1 <template>
 2   <el-table :data="tableData" id="rowDrop_table">
 3     <el-table-column prop="date" label="日期" width="180"></el-table-column>
 4     <el-table-column prop="name" label="姓名" width="180"></el-table-column>
 5     <el-table-column prop="address" label="地址"></el-table-column>
 6   </el-table>
 7 </template>
 8 
 9 <script>
10 import Sortable from "sortablejs";
11 export default {
12   name: "App",
13   data() {
14     return {
15       tableData: [
16         {
17           date: "2016-05-01",
18           name: "赵",
19           address: "上海市普陀区金沙江路 1518"
20         },
21         {
22           date: "2017-06-02",
23           name: "钱",
24           address: "上海市普陀区金沙江路 1517"
25         },
26         {
27           date: "2018-07-03",
28           name: "孙",
29           address: "上海市普陀区金沙江路 1519"
30         },
31         {
32           date: "2019-08-04",
33           name: "李",
34           address: "上海市普陀区金沙江路 1516"
35         }
36       ]
37     };
38   },
39   methods: {
40     rowDrop() {
41       let tbody = document.querySelectorAll("#rowDrop_table tbody");
42       if (!tbody.length) return;
43       let _this = this;
44       Sortable.create(tbody[0], {
45         onEnd({ newIndex, oldIndex }) {
46           const currRow = _this.tableData.splice(oldIndex, 1)[0];
47           _this.tableData.splice(newIndex, 0, currRow);
48           console.log(_this.tableData);
49         }
50       });
51     }
52   },
53   mounted() {
54     this.rowDrop();
55   }
56 };
57 </script>
58 <style>
59 #rowDrop_table {
60   width: 700px;
61   margin: 0 auto;
62 }
63 </style>