diff --git a/package-lock.json b/package-lock.json
index efc0029..5d1eaef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6079,12 +6079,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6099,17 +6101,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6226,7 +6231,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6238,6 +6244,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6252,6 +6259,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6259,12 +6267,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -6283,6 +6293,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6363,7 +6374,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6375,6 +6387,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6496,6 +6509,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
diff --git a/src/App.vue b/src/App.vue
index 2b901b9..dd1eafd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,25 +1,92 @@
 <template>
   <div id="app">
-    <!--<Tree></Tree> 
-    <SwapTable></SwapTable>-->
-    <SwapExpandTable></SwapExpandTable>
+
+    <Table :usersdata="data"></Table>
 
   </div>
 </template>
 
 <script>
-import Tree from "@/components/tree.vue"; // @ is an alias to /src
-//import SwapTabletest from "@/components/swap_table.vue"; // @ is an alias to /src
-//import SwapTable from "@/components/SwapTable2.vue"; // @ is an alias to /src
-import SwapExpandTable from "@/components/swap_expand_table.vue"; // @ is an alias to /src
+//import Tree from "@/components/tree.vue"; // @ is an alias to /src
+import Table from "@/components/Table.vue"; // @ is an alias to /src
 export default {
   components: {
-    Tree,
-    //  SwapTable,
-    SwapExpandTable
+    Table
   },
-  name: "app"
+  name: "app",
+  data: function() {
+    return {
+      data: {
+        header: [
+          "客户编号",
+          "公司名称",
+          "联系人",
+          "称谓",
+          "地址",
+          "邮编",
+          "国家",
+          "电话",
+          "传真",
+          "区域",
+          "城市"
+        ],
+        info: [
+          {
+            客户编号: "HUNGC",
+            公司名称: "五金机械",
+            联系人: "苏先生",
+            称谓: "销售代表",
+            地址: "德昌路甲",
+            邮编: "564576",
+            国家: "中国",
+            电话: "(053)5556874",
+            传真: "(053)5552376",
+            state: "东北",
+            city: "大连"
+          },
+          {
+            客户编号: "HUNGC",
+            公司名称: "五金机械",
+            联系人: "苏先生",
+            称谓: "销售代表",
+            地址: "德昌路甲",
+            邮编: "564576",
+            国家: "中国",
+            电话: "(053)5556874",
+            传真: "(053)5552376",
+            state: "华北",
+            city: "北京"
+          },
+          {
+            客户编号: "CENTC",
+            公司名称: "三捷实业",
+            联系人: "王先生",
+            称谓: "市场经理",
+            地址: "英雄山路",
+            邮编: "130083",
+            国家: "中国",
+            电话: "(061)15553392",
+            传真: "(061)15557292",
+            state: "华北",
+            city: "秦皇岛"
+          },
+          {
+            客户编号: "CENTC",
+            公司名称: "三捷实业",
+            联系人: "王先生",
+            称谓: "市场经理",
+            地址: "英雄山路",
+            邮编: "130083",
+            国家: "中国",
+            电话: "(061)15553392",
+            传真: "(061)15557292",
+            state: "华北",
+            city: "秦皇岛"
+          }
+        ]
+      }
+    };
+  }
 };
 </script>
 
-
diff --git a/src/components/SwapTable2.vue b/src/components/SwapTable2.vue
deleted file mode 100644
index 4083cd8..0000000
--- a/src/components/SwapTable2.vue
+++ /dev/null
@@ -1,243 +0,0 @@
-<template>
-  <table>
-    <tr>
-      <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="data.header.length">{{area.region}} {{area.city}}</td>
-        </tr>
-        <tr v-for="company in area.companies">
-          <template v-for="info in company.info">
-            <td>{{info}}</td>
-          </template>
-        </tr>
-        <tr>
-          <td :colspan="data.header.length">{{area.quantity}}</td>
-        </tr>
-      </template>
-    </tbody>
-
-  </table>
-
-</template>
-<script>
-export default {
-  components: {},
-  data: function() {
-    return {
-      selectedvaluedown: [],
-      selectedindexdown: 0,
-      formateddata: {},
-      data: {
-        header: [
-          "客户编号",
-          "公司名称",
-          "联系人",
-          "联系人称谓",
-          "地址",
-          "邮编",
-          "国家",
-          "电话",
-          "传真"
-        ],
-        info: [
-          {
-            name: "东北",
-            children: [
-              {
-                name: "大连",
-                children: [
-                  {
-                    name: undefined,
-                    children: undefined,
-                    data: {
-                      客户编号: "HUNGC",
-                      公司名称: "五金机械",
-                      联系人: "苏先生",
-                      称谓: "销售代表",
-                      地址: "德昌路甲",
-                      邮编: "564576",
-                      国家: "中国",
-                      电话: "(053)5556874",
-                      传真: "(053)5552376"
-                    }
-                  },
-                  {
-                    name: undefined,
-                    children: undefined,
-                    data: {
-                      客户编号: "CENTC",
-                      公司名称: "三捷实业",
-                      联系人: "王先生",
-                      称谓: "市场经理",
-                      地址: "英雄山路",
-                      邮编: "130083",
-                      国家: "中国",
-                      电话: "(061)15553392",
-                      传真: "(061)15557293"
-                    }
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            name: "华北",
-            children: [
-              {
-                name: "北京",
-                children: [
-                  {
-                    name: undefined,
-                    children: undefined,
-                    data: {
-                      客户编号: "HUNGC",
-                      公司名称: "五金机械",
-                      联系人: "苏先生",
-                      称谓: "销售代表",
-                      地址: "德昌路甲",
-                      邮编: "564576",
-                      国家: "中国",
-                      电话: "(053)5556874",
-                      传真: "(053)5552376"
-                    }
-                  },
-                  {
-                    name: undefined,
-                    children: undefined,
-                    data: {
-                      客户编号: "CENTC",
-                      公司名称: "三捷实业",
-                      联系人: "王先生",
-                      称谓: "市场经理",
-                      地址: "英雄山路",
-                      邮编: "130083",
-                      国家: "中国",
-                      电话: "(061)15553392",
-                      传真: "(061)15557293"
-                    }
-                  }
-                ]
-              },
-              {
-                name: "秦皇岛",
-                children: [
-                  {
-                    name: undefined,
-                    children: undefined,
-                    data: {
-                      客户编号: "HUNGC",
-                      公司名称: "五金机械",
-                      联系人: "苏先生",
-                      称谓: "销售代表",
-                      地址: "德昌路甲",
-                      邮编: "564576",
-                      国家: "中国",
-                      电话: "(053)5556874",
-                      传真: "(053)5552376"
-                    }
-                  },
-                  {
-                    name: undefined,
-                    children: undefined,
-                    data: {
-                      客户编号: "CENTC",
-                      公司名称: "三捷实业",
-                      联系人: "王先生",
-                      称谓: "市场经理",
-                      地址: "英雄山路",
-                      邮编: "130083",
-                      国家: "中国",
-                      电话: "(061)15553392",
-                      传真: "(061)15557293"
-                    }
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    };
-  },
-  created: function() {
-    this.formatdata();
-  },
-  methods: {
-    formatdata: function() {
-      var formateddata = {};
-      formateddata.title = this.data.header;
-      formateddata.area = [];
-      for (var items of this.data.info) {
-        for (var item of items.children) {
-          formateddata.area.push({
-            region: items.name,
-            city: item.name,
-            companies: [],
-            quantity: null
-          });
-
-          for (var childObject of item.children) {
-            var childarray = [];
-
-            for (var child in childObject.data) {
-              childarray.push(childObject.data[child]);
-            }
-            formateddata.area[formateddata.area.length - 1].companies.push({
-              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.selectedindexdown = index;
-    },
-    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.selectedindexdown, selectedvalueup);
-    }
-  }
-};
-</script>
-<style>
-th,
-tr,
-td {
-  border: black solid 1px;
-}
-
-table {
-  border-collapse: collapse;
-}
-</style>
-
-
diff --git a/src/components/Table.vue b/src/components/Table.vue
new file mode 100644
index 0000000..fba391c
--- /dev/null
+++ b/src/components/Table.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <ul>
+      <TableTree :data="formateddata"></TableTree>
+    </ul>
+  </div>
+
+</template>
+<script>
+import TableTree from "@/components/TableTree.vue"; // @ is an alias to /src
+
+export default {
+  components: { TableTree },
+  props: {
+    usersdata: Object
+  },
+  data: function() {
+    return {
+      selectedvaluedown: [],
+      selectedindexdown: 0,
+      formateddata: {}
+    };
+  },
+  created: function() {
+    this.formatusersdata();
+  },
+  methods: {
+    //fromate the data from single array structure to tree structure
+    formatusersdata: function() {
+      var formateddata = {};
+      var areas = [];
+      var cities = [];
+      var companies = [];
+      formateddata.name = this.usersdata.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) {
+          var arr = [];
+          for (var item of this.usersdata.info) {
+            if (
+              item.city === company.name[0] &&
+              item.state === citychild.name[0]
+            ) {
+              for (var x in item) {
+                if (x != "state" && x != "city") arr.push(item[x]);
+              }
+              company.children.push({ name: arr });
+            }
+          }
+        }
+      }
+      this.formateddata = 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]);
+        }
+      }
+      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.usersdata.header.indexOf(e.target.innerHTML);
+      this.selectedvaluedown = this.getindexvalue(index);
+      this.selectedindexdown = index;
+    },
+    onmouseup: function(e) {
+      var index = this.usersdata.header.indexOf(e.target.innerHTML);
+      var selectedvalueup = this.getindexvalue(index);
+      this.addindexvalue(index, this.selectedvaluedown);
+      this.addindexvalue(this.selectedindexdown, selectedvalueup);
+    }
+  }
+};
+</script>
+<style>
+th,
+tr,
+td {
+  border: black solid 1px;
+}
+
+table {
+  border-collapse: collapse;
+}
+</style>
+
diff --git a/src/components/swap_expand_tree.vue b/src/components/TableTree.vue
similarity index 54%
rename from src/components/swap_expand_tree.vue
rename to src/components/TableTree.vue
index e2672a5..d31cfb9 100644
--- a/src/components/swap_expand_tree.vue
+++ b/src/components/TableTree.vue
@@ -1,19 +1,19 @@
 <template>
-    <li>
-        <table @click="toggle">
-            <tr>
-                <td v-for="(item,index) in data.name" :key="index">{{item}}</td>
-            </tr>
-        </table>
-        <ul v-show="open">
-            <swapexpandtree :data="data" v-for="(data,index) in data.children" :key="index"></swapexpandtree>
-        </ul>
-    </li>
+  <li>
+    <table @click="toggle">
+      <tr>
+        <td v-for="(item,index) in data.name" :key="index">{{item}}</td>
+      </tr>
+    </table>
+    <ul v-show="open">
+      <TableTree :data="data" v-for="(data,index) in data.children" :key="index"></TableTree>
+    </ul>
+  </li>
 </template>
 <script>
 export default {
-  name: "swapexpandtree",
-  props: ["data"],
+  name: "TableTree",
+  props: { data: Object },
   data: function() {
     return {
       open: false
@@ -38,10 +38,7 @@ ul {
   padding-left: 0px;
 }
 table {
-  width: 80%;
-}
-td {
-  width: 10%;
+  width: 100%;
 }
 </style>
 
diff --git a/src/components/Untitled-1.json b/src/components/Untitled-1.json
deleted file mode 100644
index 3f884d7..0000000
--- a/src/components/Untitled-1.json
+++ /dev/null
@@ -1,46 +0,0 @@
-[
-    {
-                      客户编号: "HUNGC",
-                      公司名称: "五金机械",
-                      联系人: "苏先生",
-                      称谓: "销售代表",
-                      地址: "德昌路甲",
-                      邮编: "564576",
-                      国家: "中国",
-                      电话: "(053)5556874",
-                      传真: "(053)5552376",
-                      area: "东北",
-    },
-    {
-                      客户编号: "HUNGC",
-                      公司名称: "五金机械",
-                      联系人: "苏先生",
-                      称谓: "销售代表",
-                      地址: "德昌路甲",
-                      邮编: "564576",
-                      国家: "中国",
-                      电话: "(053)5556874",
-                      传真: "(053)5552376",
-                      area: "东北",
-    }
-    ,{
-                      客户编号: "HUNGC",
-                      公司名称: "五金机械",
-                      联系人: "苏先生",
-                      称谓: "销售代表",
-                      地址: "德昌路甲",
-                      邮编: "564576",
-                      国家: "中国",
-                      电话: "(053)5556874",
-                      传真: "(053)5552376",
-                      area: "东北",
-    }
-
-]
-
-["客户编号","公司名称"]
-
-obj["客户编号"]
-
-
-["公司名称","联系人"]
\ No newline at end of file
diff --git a/src/components/swap_expand_table.vue b/src/components/swap_expand_table.vue
deleted file mode 100644
index f57f413..0000000
--- a/src/components/swap_expand_table.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<template>
-    <div>
-
-        <ul>
-            <SwapExpandTree :data="formateddata"></SwapExpandTree>
-        </ul>
-    </div>
-
-</template>
-<script>
-import SwapExpandTree from "@/components/swap_expand_tree.vue"; // @ is an alias to /src
-
-export default {
-  components: { SwapExpandTree },
-  data: function() {
-    return {
-      selectedvaluedown: [],
-      selectedindexdown: 0,
-      formateddata: {},
-      data: {
-        header: [
-          "客户编号",
-          "公司名称",
-          "联系人",
-          "联系人称谓",
-          "地址",
-          "邮编",
-          "国家",
-          "电话",
-          "传真"
-        ],
-        info: [
-          {
-            name: "东北",
-            children: [
-              {
-                name: "大连",
-                children: [
-                  {
-                    name: undefined,
-                    children: undefined,
-                    data: {
-                      客户编号: "HUNGC",
-                      公司名称: "五金机械",
-                      联系人: "苏先生",
-                      称谓: "销售代表",
-                      地址: "德昌路甲",
-                      邮编: "564576",
-                      国家: "中国",
-                      电话: "(053)5556871",
-                      传真: "(053)5552371"
-                    }
-                  },
-                  {
-                    name: undefined,
-                    children: undefined,
-                    data: {
-                      客户编号: "CENTC",
-                      公司名称: "三捷实业",
-                      联系人: "王先生",
-                      称谓: "市场经理",
-                      地址: "英雄山路",
-                      邮编: "130083",
-                      国家: "中国",
-                      电话: "(061)15553392",
-                      传真: "(061)15557292"
-                    }
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            name: "华北",
-            children: [
-              {
-                name: "北京",
-                children: [
-                  {
-                    name: undefined,
-                    children: undefined,
-                    data: {
-                      客户编号: "HUNGC",
-                      公司名称: "五金机械",
-                      联系人: "苏先生",
-                      称谓: "销售代表",
-                      地址: "德昌路甲",
-                      邮编: "564576",
-                      国家: "中国",
-                      电话: "(053)5556873",
-                      传真: "(053)5552373"
-                    }
-                  },
-                  {
-                    name: undefined,
-                    children: undefined,
-                    data: {
-                      客户编号: "CENTC",
-                      公司名称: "三捷实业",
-                      联系人: "王先生",
-                      称谓: "市场经理",
-                      地址: "英雄山路",
-                      邮编: "130083",
-                      国家: "中国",
-                      电话: "(061)15553394",
-                      传真: "(061)15557294"
-                    }
-                  }
-                ]
-              },
-              {
-                name: "秦皇岛",
-                children: [
-                  {
-                    name: undefined,
-                    children: undefined,
-                    data: {
-                      客户编号: "HUNGC",
-                      公司名称: "五金机械",
-                      联系人: "苏先生",
-                      称谓: "销售代表",
-                      地址: "德昌路甲",
-                      邮编: "564576",
-                      国家: "中国",
-                      电话: "(053)5556875",
-                      传真: "(053)5552375"
-                    }
-                  },
-                  {
-                    name: undefined,
-                    children: undefined,
-                    data: {
-                      客户编号: "CENTC",
-                      公司名称: "三捷实业",
-                      联系人: "王先生",
-                      称谓: "市场经理",
-                      地址: "英雄山路",
-                      邮编: "130083",
-                      国家: "中国",
-                      电话: "(061)15553396",
-                      传真: "(061)15557296"
-                    }
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    };
-  },
-  created: function() {
-    this.formatdata();
-  },
-  methods: {
-    formatdata: function() {
-      var formateddata = {};
-      formateddata.name = this.data.header;
-      formateddata.children = [];
-      for (var items of this.data.info) {
-        formateddata.children.push({
-          name: [items.name],
-          children: []
-        });
-        for (var item of items.children) {
-          formateddata.children[formateddata.children.length - 1].children.push(
-            {
-              name: [item.name],
-              children: []
-            }
-          );
-
-          for (var childObject of item.children) {
-            var childarray = [];
-
-            for (var child in childObject.data) {
-              childarray.push(childObject.data[child]);
-            }
-
-            var currentlength =
-              formateddata.children[formateddata.children.length - 1].children
-                .length - 1;
-            formateddata.children[formateddata.children.length - 1].children[
-              currentlength
-            ].children.push({ name: childarray });
-          }
-        }
-      }
-      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.selectedindexdown = index;
-    },
-    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.selectedindexdown, selectedvalueup);
-    }
-  }
-};
-</script>
-<style>
-th,
-tr,
-td {
-  border: black solid 1px;
-}
-
-table {
-  border-collapse: collapse;
-}
-</style>
-
-