'table-dropdown'

src/App.vue

@@ -1,29 +1,19 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
+   
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+    <Tree></Tree>
   </div>
 </template>
 
-<script lang="ts">
+<script>
-import { Component, Vue } from "vue-property-decorator";
+//import Table from "@/components/table.vue"; // @ is an alias to /src
-import HelloWorld from "./components/HelloWorld.vue";
+import Tree from "@/components/tree.vue"; // @ is an alias to /src
-
+export default {
-@Component({
   components: {
-    HelloWorld
+    Tree
-  }
+  },
-})
+  name: "app"
-export default class App extends Vue {}
+};
 </script>
 
-<style>
+
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

src/components/table.vue

@@ -0,0 +1,234 @@
+<template>
+  <div id="table">
+      <div id='table-wrapper'>
+        <table class='first-col'>
+          <tr v-for='name in company_names'>
+            <td>{{name}}</td>
+            </tr>
+         
+        </table>
+    <table  class="main_body">
+  <tr>
+    
+    <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>
+<div class='test'></div>
+<div class='test1'></div>
+<div class='test2'></div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Table",
+  data: function() {
+    return {
+      downvalue: "",
+      upvalue: "",
+      downvalueindex: "",
+      upvalueindex: "",
+      buttondownvalue: [],
+      buttonupvalue: [],
+
+      cate_downvalue: "",
+      cate_upvalue: "",
+      cate_downindex: "",
+      cate_upindex: "",
+      cate_buttondownvalue: [],
+      cate_buttonupvalue: [],
+      company_names: [
+        "empty",
+        "产品",
+        "公司b",
+        "公司c",
+        "公司d",
+        "公司e",
+        "公司f",
+        "公司g",
+        "公司h"
+      ],
+      ingredients: [
+        "番茄酱",
+        "面粉",
+        "小麦",
+        "大豆",
+        "玉米",
+        "麦片",
+        "葱",
+        "姜",
+        "蒜",
+        "韭菜"
+      ],
+      companys: [
+        [1, 12, 123, 1234, 12345, 123456, 1234567, 12345678, 14, 15],
+        [10, 120, 1230, 12340, 123450, 1234560, 12345670, 123456780, 140, 150],
+        [10, 120, 1230, 12340, 123450, 1234560, 12345670, 123456780, 140, 150],
+        [10, 120, 1230, 12340, 123450, 1234560, 12345670, 123456780, 140, 150],
+        [10, 120, 1230, 12340, 123450, 1234560, 12345670, 123456780, 140, 150],
+        [10, 120, 1230, 12340, 123450, 1234560, 12345670, 123456780, 140, 150],
+        [10, 120, 1230, 12340, 123450, 1234560, 12345670, 123456780, 140, 150]
+      ],
+      categories: ["数量", "金额"]
+    };
+  },
+  methods: {
+    //get the data from categories
+    getcatevalue: function(index) {
+      var totalvalue = [];
+      if (index === 0) {
+        totalvalue = totalvalue.concat(this.ingredients.slice(0, 5));
+        for (var item in this.companys) {
+          totalvalue = totalvalue.concat(this.companys[item].slice(0, 5));
+        }
+      } else if (index === 1) {
+        totalvalue = totalvalue.concat(this.ingredients.slice(5, 10));
+        for (var item in this.companys) {
+          totalvalue = totalvalue.concat(this.companys[item].slice(5, 10));
+        }
+      }
+      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,
+          this.cate_buttonupvalue[x]
+        );
+        this.ingredients.splice(
+          this.cate_upvalueindex * 5 + x,
+          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,
+            this.cate_buttonupvalue[count]
+          );
+          this.companys[item].splice(
+            this.cate_upvalueindex * 5 + x,
+            1,
+            this.cate_buttondownvalue[count]
+          );
+          count++;
+        }
+      }
+    },
+    //get colum data
+    getcolvalue: function(index) {
+      var colvalue = [];
+      for (var item in this.companys) {
+        colvalue.push(this.companys[item][index]);
+      }
+      return colvalue;
+    },
+    //import data into colum
+    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) {
+      console.log(ev.target);
+      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 lang="scss">
+table,
+th,
+tr,
+td {
+  border: black solid 1px;
+}
+table {
+  border-collapse: collapse;
+  float: left;
+}
+
+.first-col {
+  background-color: blue;
+  width: 50px;
+  position: absolute;
+}
+.main_body {
+  background-color: yellow;
+  width: 640px;
+  margin-left: 50px;
+}
+#table-wrapper {
+  overflow-x: scroll;
+  width: 400px;
+  height: 237px;
+  margin: auto;
+}
+</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)
+
+
+ */

src/components/tree.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="tree">
+      <h1>tree dropdown</h1>
+
+     <ul>
+          <Treeitem :data='data'></Treeitem>
+      </ul> 
+        
+  </div>
+</template>
+
+<script>
+import Treeitem from "@/components/treeitem.vue";
+
+export default {
+  name: "Tree",
+  components: {
+    Treeitem
+  },
+  data: function() {
+    return {
+      data: {
+        name: "中国",
+        children: [
+          { name: "广州省" },
+          {
+            name: "山东省",
+            children: [{ name: "a路" }, { name: "b路" }, { name: "c路" }]
+          },
+          {
+            name: "福建省",
+            children: [
+              {
+                name: "福州市",
+                children: [{ name: "a路" }, { name: "b路" }]
+              },
+              { name: "长乐市" },
+              { name: "厦门市" },
+              {
+                name: "福清市",
+                children: [{ name: "a路" }, { name: "b路" }]
+              }
+            ]
+          }
+        ]
+      }
+    };
+  },
+  created: function() {}
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+/*
+
+
+  provinces: [
+        {
+          show: true,
+          name: "fujian",
+          cities: [
+            {
+              show: true,
+              name: "fuzhou",
+              districts: [
+                {
+                  show: true,
+                  name: "taijian",
+                  roads: [{ name: "taijian-a" }, { name: "taijian-b" }]
+                },
+                {
+                  show: true,
+                  name: "gulou",
+                  roads: [{ name: "gulou-c" }, { name: "gulou-d" }]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          show: true,
+          name: "guangzhou",
+          cities: [
+            {
+              show: true,
+              name: "guangdong",
+              districts: [
+                {
+                  show: true,
+                  name: "yuexiue",
+                  roads: [{ name: "yuexue-a" }, { name: "yuexue-b" }]
+                },
+                {
+                  show: true,
+                  name: "dongguang",
+                  roads: [{ name: "dongguang-c" }, { name: "donguang-d" }]
+                }
+              ]
+            }
+          ]
+        }
+      ] */

src/components/treeitem.vue

@@ -0,0 +1,53 @@
+<template>
+ <li >
+    <span @click="toggle" >{{data.name}}</span> 
+         <ul >
+            <treeitem v-for="data in data.children" :data='data' v-show="show"></treeitem>
+        </ul>
+           
+      </li> 
+ 
+</template>
+
+
+
+
+
+<script>
+export default {
+  name: "treeitem",
+  props: ["data"],
+  data: function() {
+    return {
+      show: false
+    };
+  },
+  created: function() {},
+  computed: {
+    haschildren() {
+      return this.data.children && this.data.children.length;
+    }
+  },
+  methods: {
+    toggle: function() {
+      console.log(this.haschildren);
+      if (this.haschildren) {
+        this.show = !this.show;
+      }
+    }
+  }
+};
+</script>
+
+
+
+ <!--
+<template>
+  <ul v-show="show">
+      <li v-for="data in data.children" @click="toggle" >
+           <span>{{data.name}}</span> 
+            <treeitem :data='data' ></treeitem>
+      </li>
+ </ul>
+</template>
+-->