swap function done

src/components/SwapTable2.vue

@@ -3,12 +3,12 @@
     <!--<swaprecursion :data="formateddata"></swaprecursion> -->
     <table>
         <tr>
-            <th v-for="(title,index) in formateddata.title">{{title}}</th>
+            <th v-for="(title,index) in formateddata.title" @mousedown='onmousedown($event)' @mouseup='onmouseup($event)'>{{title}}</th>
         </tr>
         <tbody>
             <template v-for="area in formateddata.area">
                 <tr>
-                    <td colspan="9">{{area.region}} {{area.city}}</td>
+                    <td :colspan="data.header.length">{{area.region}} {{area.city}}</td>
 
                 </tr>
                 <tr v-for="company in area.companies">
@@ -16,7 +16,9 @@
                         <td>{{info}}</td>
                     </template>
                 </tr>
-
+                <tr>
+                    <td :colspan="data.header.length">{{area.quantity}}</td>
+                </tr>
             </template>
         </tbody>
 
@@ -28,6 +30,8 @@ export default {
   components: {},
   data: function() {
     return {
+      selectedvaluedown: [],
+      selectedindex: 0,
       formateddata: {},
       data: {
         header: [
@@ -163,7 +167,6 @@ export default {
   },
   created: function() {
     this.formatdata();
-    console.log(this.formateddata);
   },
   methods: {
     formatdata: function() {
@@ -175,7 +178,8 @@ export default {
           formateddata.area.push({
             region: items.name,
             city: item.name,
-            companies: []
+            companies: [],
+            quantity: null
           });
 
           for (var childObject of item.children) {
@@ -188,9 +192,42 @@ export default {
               info: childarray
             });
           }
+          formateddata.area[formateddata.area.length - 1].quantity =
+            formateddata.area[formateddata.area.length - 1].companies.length;
         }
       }
       this.formateddata = formateddata;
+    },
+    getindexvalue: function(index) {
+      var array = [this.formateddata.title[index]];
+      for (var area of this.formateddata.area) {
+        for (var item of area.companies) {
+          array.push(item.info[index]);
+        }
+      }
+      return array;
+    },
+    addindexvalue: function(index, selectedvalue) {
+      var counter = 0;
+      this.formateddata.title.splice(index, 1, selectedvalue[0]);
+      for (var area of this.formateddata.area) {
+        for (var item in area.companies) {
+          counter += 1;
+          area.companies[item].info.splice(index, 1, selectedvalue[counter]);
+        }
+      }
+    },
+    onmousedown: function(e) {
+      var index = this.data.header.indexOf(e.target.innerHTML);
+      this.selectedvaluedown = this.getindexvalue(index);
+      this.selectedindex = index;
+      console.log(this.selectedindex);
+    },
+    onmouseup: function(e) {
+      var index = this.data.header.indexOf(e.target.innerHTML);
+      var selectedvalueup = this.getindexvalue(index);
+      this.addindexvalue(index, this.selectedvaluedown);
+      this.addindexvalue(this.selectedindex, selectedvalueup);
     }
   }
 };
@@ -207,37 +244,4 @@ table {
 }
 </style>
 
-/*
- formatdata: function() {
-      var formateddata = {};
-      formateddata.name = this.data.header;
-      formateddata.children = [];
-      for (var items of this.data.info) {
-        for (var item of items.children) {
-          formateddata.children.push({ name: [] });
-          formateddata.children[formateddata.children.length - 1].name.push(
-            items.name,
-            item.name
-          );
-          formateddata.children[formateddata.children.length - 1].children = [];
 
-          //===========================================
-          for (var childObject of item.children) {
-            var childarray = [];
-            for (var child in childObject) {
-              if (child == "data") {
-                for (var each in childObject[child]) {
-                  childarray.push(childObject[child][each]);
-                }
-                //childarray.push(childObject[child]);
-              }
-            }
-            formateddata.children[
-              formateddata.children.length - 1
-            ].children.push({ name: childarray });
-          }
-        }
-      }
-      console.log(formateddata);
-      this.formateddata = formateddata;
-    }*/