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

Posted pengzhao-mr

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue+ElementUi项目实现表格-单行拖拽相关的知识,希望对你有一定的参考价值。

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

首先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>

以上是关于Vue+ElementUi项目实现表格-单行拖拽的主要内容,如果未能解决你的问题,请参考以下文章

elementui表格列左右移动

Element-ui的Table表格展开行功能

elementui弹框中表格数据选择后关闭很慢

elementUI系列一vue拖拽功能实现-vuedraggable实现多层嵌套拖拽

vue+elementUi开发一个可拖拽的和拉伸编辑的画板

elementui表格div变化,内容没有响应