multi select headers

src/App.vue

@@ -48,13 +48,26 @@ export default {
           {
             客户编号: "HUNGC",
             公司名称: "五金机械",
-            联系人: "苏先生",
+            联系人: "郑先生",
             称谓: "销售代表",
             地址: "德昌路甲",
             邮编: "564576",
-            国家: "德国",
+            国家: "中国",
             电话: "(053)5556874",
             传真: "(053)5552376",
+            区域: "东北",
+            城市: "福州"
+          },
+          {
+            客户编号: "HUNGC",
+            公司名称: "五金机械",
+            联系人: "苏先生",
+            称谓: "销售代表",
+            地址: "德昌路甲",
+            邮编: "564577",
+            国家: "德国",
+            电话: "(053)5556875",
+            传真: "(053)5552377",
             区域: "华北",
             城市: "北京"
           },
@@ -77,10 +90,10 @@ export default {
             联系人: "王先生",
             称谓: "市场经理",
             地址: "英雄山路",
-            邮编: "130083",
+            邮编: "130084",
             国家: "英国",
-            电话: "(061)15553392",
+            电话: "(061)15553393",
-            传真: "(061)15557292",
+            传真: "(061)15557293",
             区域: "华北",
             城市: "秦皇岛"
           }

src/components/Table.vue

@@ -4,8 +4,9 @@
       <li>
         <table>
           <tr>
-            <th v-for="(header,index) in usersdata.cate_header":key="index" @click="formatUsersData($event)">{{header}}</th>
+            <th v-for="(header,index) in usersdata.cate_header":key="index" 
-            <!-- @mousedown="onMouseDown($event)" @mouseup="onMouseUp($event)" -->
+             @click="appendselection($event)" >{{header}}</th>
+            <!-- @mousedown="onMouseDown($event)" @mouseup="onMouseUp($event)" @click="formatUsersData($event) " -->
           </tr>
         </table>
       </li>
@@ -16,7 +17,6 @@
       </li>
     </ul>
   </div>
-
 </template>
 <script>
 import TableTree from "@/components/TableTree.vue"; // @ is an alias to /src
@@ -29,47 +29,97 @@ export default {
   data: function() {
     return {
       selectedvaluedown: [],
-
       selectedindexdown: 0,
-      formateddata: {}
+      formateddata: {},
+      output:[]
     };
   },
   created: function() {
+  this.formatUsersData()
   },
   methods: {
-    formatUsersData:function(inputvalue){
+     appendselection:function(e) {
-      var formateddata = {};
+      this.output.push(e.target.innerHTML)
-      var inputvalue=inputvalue.target.innerHTML
+      this.formatUsersData(this.output)
-      formateddata.name=[inputvalue] 
+    }
-      formateddata.children=[] 
+    ,
-      for(var item of this.usersdata.info){
+    // format company info from object to array
-        if(item[inputvalue]){
+    objectToArray(value){
-          var found = formateddata.children.some(function(each) {
+      var array=[]
-              return each.name[0] === item[inputvalue];
+      for(var x in value){
-            });
+        array.push(value[x])
-            if (!found) {
+      }
-              
+      return array
-              formateddata.children.push({ name: [item[inputvalue]], children: [] });
+    },
-              for(var each of this.usersdata.info){
+    //get matched name by userinput return object in array
-                var details=[]
+    getName(userinput,data){
-                if(each[inputvalue]==item[inputvalue]){
+        var array=[]
-                  for(var eachitem in each){
+        var arrayofobject=[]
-                    details.push(each[eachitem])
+        for(var item of data){
-                  }
+        if(array.indexOf(item[userinput])===-1){
-                  formateddata.children[formateddata.children.length-1].children.push({name:details})
+          array.push(item[userinput])
-                }
-              }
-
-            }
         }
       }
-      console.log(formateddata)
+      for(var each of array){
-      this.formateddata=formateddata
+        arrayofobject.push({name:[each]})
+      }
+     return arrayofobject           
     },
- 
+    //get matched final name's children  return array
+  getFinalChildren(name){
+    var array=[]
+    for(var item of this.usersdata.info){
+        if(Object.values(item).indexOf(name)>-1){
+          array.push({name:this.objectToArray(item)})
+        }
+      }
+      return array
+  },
+  // return object in array
+    getChildren(name){
+    var array=[]
+    for(var item of this.usersdata.info){
+        if(Object.values(item).indexOf(name)>-1){
+          array.push(item)
+        }
+      }
+      return array
+  },
 
 
-    //// function below is for swap table header uses.
+    formatUsersData(inputvalue){
+      var formateddata={};
+      var currentchildren
+        for(var x in inputvalue){
+           var dataholder=[]
+           //if this is beginning initial structure and data
+          if(x==0){
+            formateddata.children=this.getName(inputvalue[x],this.usersdata.info)
+            currentchildren=formateddata.children
+            // if only one userselect then output company info
+            if(inputvalue.length==1){
+              for(var finalitem of formateddata.children){
+                  finalitem.children=this.getFinalChildren(finalitem.name[0])
+               }
+            }
+          }else{
+           for(var item of currentchildren){
+             item.children=this.getName(inputvalue[x],this.getChildren(item.name[0]))
+             dataholder=dataholder.concat(item.children)
+           }
+           currentchildren=dataholder
+           //if this is final output company info
+           if(x==inputvalue.length-1){
+             for(var finalitem of currentchildren){
+                  finalitem.children=this.getFinalChildren(finalitem.name[0])
+               }
+           }
+          }
+        }
+        this.formateddata=formateddata
+    },
+
+//// function below is for swap table header uses.
     getIndexValue: function(index) {
       var array = [this.formateddata.header[index]];
       for (var area of this.formateddata.children) {
@@ -109,64 +159,14 @@ export default {
   }
 };
 </script>
-<style>
+<style >
 th,
 tr,
 td {
   border: black solid 1px;
 }
-th{
-  width:200px
-}
 
 table {
   border-collapse: collapse;
 }
 </style>
-
-/*
-   formatUsersData: function() {
-      var formateddata = {};
-      var areas = [];
-      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) {
-          areas.push(item.state);
-        }
-      }
-      for (var area of areas) {
-        formateddata.children.push({ name: [area], children: [] });
-      }
-      for (var citychild of formateddata.children) {
-        for (var item of this.usersdata.info) {
-          if (item.state === citychild.name[0]) {
-            var found = citychild.children.some(function(each) {
-              return each.name[0] === item.city;
-            });
-            if (!found) {
-              citychild.children.push({ name: [item.city], children: [] });
-            }
-          }
-        }
-        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 = [];
-              for (var x in item) {
-                if (x != "state" && x != "city") arr.push(item[x]);
-              }
-              company.children.push({ name: arr });
-            }
-          }
-        }
-      }
-      this.formateddata = formateddata;
-    },
-*/

src/components/TableTree.vue

@@ -16,7 +16,8 @@ export default {
   props: { data: Object },
   data: function() {
     return {
-      open: false
+      open: true
+
     };
   },
   methods: {
@@ -33,15 +34,17 @@ export default {
   }
 };
 </script>
-<style>
+<style >
-ul {
+
-  padding-left: 0px;
+li{
+  list-style-type: none
 }
-td {
+td{
-  width: 120px;
+  width:9%
 }
+
 table {
-  width: 60%;
+  width: 80%;
 }
 </style>