码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-05-24 00:25:58      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:mount   his   color   select   table   back   width   目的   ejs   

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

首先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项目实现表格-单行拖拽

标签:mount   his   color   select   table   back   width   目的   ejs   

原文地址:https://www.cnblogs.com/PengZhao-Mr/p/12945154.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!