diff --git a/src/App.vue b/src/App.vue
index ec498d8..2b901b9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,22 @@
 <template>
   <div id="app">
-    <!--<Tree></Tree> -->
+    <!--<Tree></Tree> 
+    <SwapTable></SwapTable>-->
+    <SwapExpandTable></SwapExpandTable>
 
-    <SwapTable></SwapTable>
   </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 HelloWorld from "@/components/HelloWorld.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
 export default {
   components: {
     Tree,
-    SwapTable
+    //  SwapTable,
+    SwapExpandTable
   },
   name: "app"
 };
diff --git a/src/components/SwapTable2.vue b/src/components/SwapTable2.vue
index 05c67a3..4083cd8 100644
--- a/src/components/SwapTable2.vue
+++ b/src/components/SwapTable2.vue
@@ -1,28 +1,25 @@
 <template>
-
-    <!--<swaprecursion :data="formateddata"></swaprecursion> -->
-    <table>
+  <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>
-            <th v-for="(title,index) in formateddata.title" @mousedown='onmousedown($event)' @mouseup='onmouseup($event)'>{{title}}</th>
+          <td :colspan="data.header.length">{{area.region}} {{area.city}}</td>
         </tr>
-        <tbody>
-            <template v-for="area in formateddata.area">
-                <tr>
-                    <td :colspan="data.header.length">{{area.region}} {{area.city}}</td>
+        <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>
 
-                </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>
+  </table>
 
 </template>
 <script>
@@ -31,7 +28,7 @@ export default {
   data: function() {
     return {
       selectedvaluedown: [],
-      selectedindex: 0,
+      selectedindexdown: 0,
       formateddata: {},
       data: {
         header: [
@@ -220,14 +217,13 @@ export default {
     onmousedown: function(e) {
       var index = this.data.header.indexOf(e.target.innerHTML);
       this.selectedvaluedown = this.getindexvalue(index);
-      this.selectedindex = index;
-      console.log(this.selectedindex);
+      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.selectedindex, selectedvalueup);
+      this.addindexvalue(this.selectedindexdown, selectedvalueup);
     }
   }
 };
diff --git a/src/components/swap_expand_table.vue b/src/components/swap_expand_table.vue
new file mode 100644
index 0000000..f57f413
--- /dev/null
+++ b/src/components/swap_expand_table.vue
@@ -0,0 +1,236 @@
+<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>
+
+
diff --git a/src/components/swap_expand_tree.vue b/src/components/swap_expand_tree.vue
new file mode 100644
index 0000000..e2672a5
--- /dev/null
+++ b/src/components/swap_expand_tree.vue
@@ -0,0 +1,47 @@
+<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>
+</template>
+<script>
+export default {
+  name: "swapexpandtree",
+  props: ["data"],
+  data: function() {
+    return {
+      open: false
+    };
+  },
+  methods: {
+    // return this.data has children and children lenght
+    isfolder: function() {
+      return this.data.children && this.data.children.length;
+    },
+    // if isfolder is true open close folder
+    toggle: function() {
+      if (this.isfolder) {
+        this.open = !this.open;
+      }
+    }
+  }
+};
+</script>
+<style>
+ul {
+  padding-left: 0px;
+}
+table {
+  width: 80%;
+}
+td {
+  width: 10%;
+}
+</style>
+
diff --git a/src/components/swap_table.vue b/src/components/swap_table.vue
deleted file mode 100644
index e3a54f5..0000000
--- a/src/components/swap_table.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<template>
-  <div id="swap_table">
-    <h1>swap table test</h1>
-    <table class="table">
-      <tr>
-        <th></th>
-        <th colspan='5' v-for='(category, index) in categories' :key='index' @mousedown='cate_mousedown($event)' @mouseup='cate_mouseup($event)'>{{category}}</th>
-
-      </tr>
-      <tr>
-        <td v-for='(ingredient,index) in ingredients' :key="index" @mousedown='onmousedown($event)' @mouseup='onmouseup($event)'>{{ingredient}}</td>
-      </tr>
-      <tr v-for='(company,index) in companys' :key="index">
-        <td v-for='(detail,index) in company' :key='index'>
-          {{detail}}
-        </td>
-      </tr>
-    </table>
-
-  </div>
-</template>
-
-<script>
-export default {
-  name: "swap_table",
-  data: function() {
-    return {
-      downvalue: "",
-      upvalue: "",
-      downvalueindex: "",
-      upvalueindex: "",
-      buttondownvalue: [],
-      buttonupvalue: [],
-
-      cate_downvalue: "",
-      cate_upvalue: "",
-      cate_downindex: "",
-      cate_upindex: "",
-      cate_buttondownvalue: [],
-      cate_buttonupvalue: [],
-
-      ingredients: [
-        "产品",
-        "番茄酱",
-        "面粉",
-        "小麦",
-        "大豆",
-        "玉米",
-        "麦片",
-        "葱",
-        "姜",
-        "蒜",
-        "韭菜"
-      ],
-      companys: [
-        ["公司a", 1, 12, 123, 1234, 12345, 123456, 1234567, 12345678, 14, 15],
-        [
-          "公司a",
-          10,
-          120,
-          1230,
-          12340,
-          123450,
-          1234560,
-          12345670,
-          123456780,
-          140,
-          150
-        ],
-        [
-          "公司a",
-          10,
-          120,
-          1230,
-          12340,
-          123450,
-          1234560,
-          12345670,
-          123456780,
-          140,
-          150
-        ],
-        [
-          "公司c",
-          10,
-          120,
-          1230,
-          12340,
-          123450,
-          1234560,
-          12345670,
-          123456780,
-          140,
-          150
-        ],
-        [
-          "公司e",
-          10,
-          120,
-          1230,
-          12340,
-          123450,
-          1234560,
-          12345670,
-          123456780,
-          140,
-          150
-        ],
-        [
-          "公司f",
-          10,
-          120,
-          1230,
-          12340,
-          123450,
-          1234560,
-          12345670,
-          123456780,
-          140,
-          150
-        ],
-        [
-          "公司d",
-          10,
-          120,
-          1230,
-          12340,
-          123450,
-          1234560,
-          12345670,
-          123456780,
-          140,
-          150
-        ]
-      ],
-      categories: ["数量", "金额"]
-    };
-  },
-  created: function() {},
-  methods: {
-    //get the data from categories
-    getcatevalue: function(index) {
-      var totalvalue = [];
-      if (index === 0) {
-        // totalvalue=totalvalue.concat(this.categories.slice(0,1))
-        totalvalue = totalvalue.concat(this.ingredients.slice(1, 6));
-        for (var item in this.companys) {
-          totalvalue = totalvalue.concat(this.companys[item].slice(1, 6));
-        }
-      } else if (index === 1) {
-        //totalvalue=totalvalue.concat(this.categories.slice(1,2))
-        totalvalue = totalvalue.concat(this.ingredients.slice(6, 11));
-        for (var item in this.companys) {
-          totalvalue = totalvalue.concat(this.companys[item].slice(6, 11));
-        }
-      }
-      return totalvalue;
-    },
-    //this will import data to a categories
-    importcatevalue: function() {
-      this.categories.splice(this.cate_upvalueindex, 1, this.cate_downvalue);
-      this.categories.splice(this.cate_downvalueindex, 1, this.cate_upvalue);
-
-      for (var x = 0; x < 5; x++) {
-        this.ingredients.splice(
-          this.cate_downvalueindex * 5 + x + 1,
-          1,
-          this.cate_buttonupvalue[x]
-        );
-        this.ingredients.splice(
-          this.cate_upvalueindex * 5 + x + 1,
-          1,
-          this.cate_buttondownvalue[x]
-        );
-      }
-      var count = 5;
-      for (var item in this.companys) {
-        for (var x = 0; x < 5; x++) {
-          this.companys[item].splice(
-            this.cate_downvalueindex * 5 + x + 1,
-            1,
-            this.cate_buttonupvalue[count]
-          );
-          this.companys[item].splice(
-            this.cate_upvalueindex * 5 + x + 1,
-            1,
-            this.cate_buttondownvalue[count]
-          );
-          count++;
-        }
-      }
-    },
-    getcolvalue: function(index) {
-      var colvalue = [];
-      for (var item in this.companys) {
-        colvalue.push(this.companys[item][index]);
-      }
-      return colvalue;
-    },
-    importcolvalue() {
-      this.ingredients.splice(this.upvalueindex, 1, this.downvalue);
-      this.ingredients.splice(this.downvalueindex, 1, this.upvalue);
-      for (var item in this.companys) {
-        this.companys[item].splice(
-          this.downvalueindex,
-          1,
-          this.buttonupvalue[item]
-        );
-        this.companys[item].splice(
-          this.upvalueindex,
-          1,
-          this.buttondownvalue[item]
-        );
-      }
-    },
-
-    onmousedown: function(ev) {
-      //get mousedown value and index in the array
-      this.downvalue = ev.target.innerHTML;
-      this.downvalueindex = this.ingredients.indexOf(ev.target.innerHTML);
-      this.buttondownvalue = this.getcolvalue(this.downvalueindex);
-    },
-
-    onmouseup: function(ev) {
-      this.upvalue = ev.target.innerHTML;
-      this.upvalueindex = this.ingredients.indexOf(ev.target.innerHTML);
-      this.buttonupvalue = this.getcolvalue(this.upvalueindex);
-      this.importcolvalue();
-    },
-    cate_mousedown(ev) {
-      this.cate_downvalue = ev.target.innerHTML;
-      this.cate_downvalueindex = this.categories.indexOf(ev.target.innerHTML);
-      this.cate_buttondownvalue = this.getcatevalue(this.cate_downvalueindex);
-    },
-    cate_mouseup(ev) {
-      this.cate_upvalue = ev.target.innerHTML;
-      this.cate_upvalueindex = this.categories.indexOf(ev.target.innerHTML);
-      this.cate_buttonupvalue = this.getcatevalue(this.cate_upvalueindex);
-      this.importcatevalue();
-    }
-  }
-};
-</script>
-
-
-<style scoped>
-.table,
-th,
-tr,
-td {
-  border: black solid 1px;
-}
-.table {
-  border-collapse: collapse;
-}
-</style>
-/*
-This is main formulate
-this.categories.splice(this.cate_upvalueindex,1,this.cate_downvalue)
-this.categories.splice(this.cate_downvalueindex,1,this.cate_upvalue)
- */
\ No newline at end of file