add swap function on table header

src/App.vue

@@ -17,7 +17,7 @@ export default {
   data: function() {
     return {
       data: {
-        header: [
+        cate_header: [
           "客户编号",
           "公司名称",
           "联系人",
@@ -28,6 +28,7 @@ export default {
           "电话",
           "传真"
         ],
+        header: ["中国"],
         info: [
           {
             客户编号: "HUNGC",

src/components/Table.vue

@@ -1,7 +1,18 @@
 <template>
   <div>
     <ul>
-      <TableTree :data="formateddata"></TableTree>
+      <li>
+        <table>
+          <tr>
+            <th v-for="(header,index) in usersdata.cate_header" @mousedown="onmousedown($event)" @mouseup="onmouseup($event)" :key="index">{{header}}</th>
+          </tr>
+        </table>
+      </li>
+      <li>
+        <ul>
+          <TableTree :data="formateddata"></TableTree>
+        </ul>
+      </li>
     </ul>
   </div>
 
@@ -17,13 +28,14 @@ export default {
   data: function() {
     return {
       selectedvaluedown: [],
-      
+
       selectedindexdown: 0,
       formateddata: {}
     };
   },
   created: function() {
     this.formatusersdata();
+    console.log(this.formateddata);
   },
   methods: {
     //fromate the data from single array structure to tree structure
@@ -33,6 +45,7 @@ export default {
       var cities = [];
       var companies = [];
       formateddata.name = this.usersdata.header;
+      formateddata.header = this.usersdata.cate_header;
       formateddata.children = [];
       for (var item of this.usersdata.info) {
         if (areas.indexOf(item.state) === -1) {
@@ -54,13 +67,12 @@ export default {
           }
         }
         for (var company of citychild.children) {
-         
           for (var item of this.usersdata.info) {
             if (
               item.city === company.name[0] &&
               item.state === citychild.name[0]
             ) {
-               var arr = [];
+              var arr = [];
               for (var x in item) {
                 if (x != "state" && x != "city") arr.push(item[x]);
               }
@@ -70,35 +82,40 @@ export default {
         }
       }
       this.formateddata = formateddata;
-      console.log(formateddata)
     },
     //// function below is for swap table header uses.
     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]);
+      var array = [this.formateddata.header[index]];
+      for (var area of this.formateddata.children) {
+        for (var city of area.children) {
+          for (var company of city.children) {
+            array.push(company.name[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]);
+      this.formateddata.header.splice(index, 1, selectedvalue[0]);
+
+      for (var area of this.formateddata.children) {
+        for (var city of area.children) {
+          for (var company of city.children) {
+            counter += 1;
+            company.name.splice(index, 1, selectedvalue[counter]);
+          }
         }
       }
     },
     onmousedown: function(e) {
-      var index = this.usersdata.header.indexOf(e.target.innerHTML);
+      var index = this.formateddata.header.indexOf(e.target.innerHTML);
+      console.log(index);
       this.selectedvaluedown = this.getindexvalue(index);
       this.selectedindexdown = index;
     },
     onmouseup: function(e) {
-      var index = this.usersdata.header.indexOf(e.target.innerHTML);
+      var index = this.formateddata.header.indexOf(e.target.innerHTML);
       var selectedvalueup = this.getindexvalue(index);
       this.addindexvalue(index, this.selectedvaluedown);
       this.addindexvalue(this.selectedindexdown, selectedvalueup);

src/components/TableTree.vue

@@ -16,7 +16,7 @@ export default {
   props: { data: Object },
   data: function() {
     return {
-      open: true
+      open: false
     };
   },
   methods: {