Merge pull request lin-xin#178 from lin-xin/dev

lin-xin · web-flow · commit 5ac78cfd18fb · 2019-06-13T17:07:08.000+08:00
修复表格顺序改变后误删其他数据
diff --git a/public/vuetable.json b/public/vuetable.json
@@ -1,43 +1,53 @@
 {
     "list": [{
-        "date": "1997-11-11",
-        "name": "林丽",
-        "address": "吉林省 辽源市 龙山区"
-    }, {
-        "date": "1987-09-24",
-        "name": "文敏",
-        "address": "江西省 萍乡市 芦溪县"
-    }, {
-        "date": "1996-08-08",
-        "name": "杨秀兰",
-        "address": "黑龙江省 黑河市 五大连池市"
-    }, {
-        "date": "1978-06-18",
-        "name": "魏强",
-        "address": "广东省 韶关市 始兴县"
-    }, {
-        "date": "1977-07-09",
-        "name": "石秀兰",
-        "address": "江苏省 宿迁市 宿豫区"
-    }, {
-        "date": "1994-09-20",
-        "name": "朱洋",
-        "address": "海外 海外 -"
-    }, {
-        "date": "1980-01-22",
-        "name": "傅敏",
+        "id": 1,
+        "date": "2013-05-04",
+        "name": "邱秀兰",
+        "address": "浙江省 金华市 兰溪市"
+    }, {
+        "id": 2,
+        "date": "1991-05-02",
+        "name": "蒋军",
+        "address": "广东省 东莞市 长安镇"
+    }, {
+        "id": 3,
+        "date": "2009-12-01",
+        "name": "廖艳",
+        "address": "陕西省 渭南市 富平县"
+    }, {
+        "id": 4,
+        "date": "1999-07-15",
+        "name": "秦强",
+        "address": "内蒙古自治区 巴彦淖尔市 磴口县"
+    }, {
+        "id": 5,
+        "date": "1997-02-09",
+        "name": "唐洋",
+        "address": "湖南省 长沙市 "
+    }, {
+        "id": 6,
+        "date": "2018-05-23",
+        "name": "易勇",
+        "address": "重庆 重庆市 双桥区"
+    }, {
+        "id": 7,
+        "date": "2014-04-09",
+        "name": "袁丽",
+        "address": "陕西省 铜川市 耀州区"
+    }, {
+        "id": 8,
+        "date": "2013-08-05",
+        "name": "常刚",
         "address": "海外 海外 -"
     }, {
-        "date": "1985-10-10",
-        "name": "毛明",
-        "address": "内蒙古自治区 包头市 九原区"
+        "id": 9,
+        "date": "1995-12-13",
+        "name": "龚勇",
+        "address": "黑龙江省 牡丹江市 西安区"
     }, {
-        "date": "1975-09-08",
-        "name": "何静",
-        "address": "西藏自治区 阿里地区 普兰县"
-    }, {
-        "date": "1970-06-07",
-        "name": "郭秀英",
-        "address": "四川省 巴中市 恩阳区"
+        "id": 10,
+        "date": "2017-06-06",
+        "name": "魏强",
+        "address": "安徽省 六安市 裕安区"
     }]
 }
diff --git a/src/components/page/BaseTable.vue b/src/components/page/BaseTable.vue
@@ -87,7 +87,8 @@
                     date: '',
                     address: ''
                 },
-                idx: -1
+                idx: -1,
+                id: -1
             }
         },
         created() {
@@ -143,16 +144,18 @@
             },
             handleEdit(index, row) {
                 this.idx = index;
-                const item = this.tableData[index];
+                this.id = row.id;
                 this.form = {
-                    name: item.name,
-                    date: item.date,
-                    address: item.address
+                    id: row.id,
+                    name: row.name,
+                    date: row.date,
+                    address: row.address
                 }
                 this.editVisible = true;
             },
             handleDelete(index, row) {
                 this.idx = index;
+                this.id = row.id;
                 this.delVisible = true;
             },
             delAll() {
@@ -170,15 +173,33 @@
             },
             // 保存编辑
             saveEdit() {
-                this.$set(this.tableData, this.idx, this.form);
                 this.editVisible = false;
                 this.$message.success(`修改第 ${this.idx+1} 行成功`);
+                if(this.tableData[this.idx].id === this.id){
+                    this.$set(this.tableData, this.idx, this.form);
+                }else{
+                    for(let i = 0; i < this.tableData.length; i++){
+                        if(this.tableData[i].id === this.id){
+                            this.$set(this.tableData, i, this.form);
+                            return ;
+                        }
+                    }
+                }
             },
             // 确定删除
             deleteRow(){
-                this.tableData.splice(this.idx, 1);
                 this.$message.success('删除成功');
                 this.delVisible = false;
+                if(this.tableData[this.idx].id === this.id){
+                    this.tableData.splice(this.idx, 1);
+                }else{
+                    for(let i = 0; i < this.tableData.length; i++){
+                        if(this.tableData[i].id === this.id){
+                            this.tableData.splice(i, 1);
+                            return ;
+                        }
+                    }
+                }
             }
         }
     }
