Merge branch 'master' of http://git.cf/mqzheng/Table

111.txt

@@ -1 +0,0 @@
-1231

src/App.vue

@@ -17,7 +17,7 @@ export default {
   data: function() {
     return {
       data: {
-        header: [
+        cate_header: [
           "客户编号",
           "公司名称",
           "联系人",
@@ -26,10 +26,9 @@ 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,12 +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
@@ -32,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) {
@@ -53,12 +67,12 @@ export default {
           }
         }
         for (var company of citychild.children) {
-          var arr = [];
           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]);
               }
@@ -71,31 +85,37 @@ export default {
     },
     //// 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

@@ -37,8 +37,11 @@ export default {
 ul {
   padding-left: 0px;
 }
+td {
+  width: 10%;
+}
 table {
-  width: 100%;
+  width: 60%;
 }
 </style>