From 3824bbc974d3b676a7e7b44571d0a846d74115e7 Mon Sep 17 00:00:00 2001 From: Maoqiang Zheng Date: Tue, 21 Aug 2018 16:44:02 +0800 Subject: [PATCH] expand by header selection --- src/App.vue | 50 ++++++------ src/components/Table.vue | 149 +++++++++++++++++++++-------------- src/components/TableTree.vue | 2 +- 3 files changed, 119 insertions(+), 82 deletions(-) diff --git a/src/App.vue b/src/App.vue index bce666d..f733d2c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -26,22 +26,24 @@ export default { "邮编", "国家", "电话", - "传真" + "传真", + "区域", + "城市" ], - header: ["中国"], + header: ["test"], info: [ { 客户编号: "HUNGC", 公司名称: "五金机械", - 联系人: "苏先生", + 联系人: "郑先生", 称谓: "销售代表", 地址: "德昌路甲", 邮编: "564576", 国家: "中国", 电话: "(053)5556874", 传真: "(053)5552376", - state: "东北", - city: "大连" + 区域: "东北", + 城市: "大连" }, { 客户编号: "HUNGC", @@ -50,11 +52,24 @@ export default { 称谓: "销售代表", 地址: "德昌路甲", 邮编: "564576", - 国家: "中国", + 国家: "德国", 电话: "(053)5556874", 传真: "(053)5552376", - state: "华北", - city: "北京" + 区域: "华北", + 城市: "北京" + }, + { + 客户编号: "CENTC", + 公司名称: "三捷实业", + 联系人: "陈先生", + 称谓: "市场经理", + 地址: "英雄山路", + 邮编: "130083", + 国家: "美国", + 电话: "(061)15553392", + 传真: "(061)15557292", + 区域: "华北", + 城市: "秦皇岛" }, { 客户编号: "CENTC", @@ -63,24 +78,11 @@ export default { 称谓: "市场经理", 地址: "英雄山路", 邮编: "130083", - 国家: "中国", + 国家: "英国", 电话: "(061)15553392", 传真: "(061)15557292", - state: "华北", - city: "秦皇岛" - }, - { - 客户编号: "CENTC", - 公司名称: "三捷实业", - 联系人: "王先生", - 称谓: "市场经理", - 地址: "英雄山路", - 邮编: "130083", - 国家: "中国", - 电话: "(061)15553392", - 传真: "(061)15557292", - state: "华北", - city: "秦皇岛" + 区域: "华北", + 城市: "秦皇岛" } ] } diff --git a/src/components/Table.vue b/src/components/Table.vue index 6d877d5..09f3fff 100644 --- a/src/components/Table.vue +++ b/src/components/Table.vue @@ -4,7 +4,8 @@
  • - + +
    {{header}}{{header}}
    • @@ -34,12 +35,97 @@ export default { }; }, created: function() { - this.formatusersdata(); - console.log(this.formateddata); }, methods: { - //fromate the data from single array structure to tree structure - formatusersdata: function() { + formatUsersData:function(inputvalue){ + var formateddata = {}; + var inputvalue=inputvalue.target.innerHTML + formateddata.name=[inputvalue] + formateddata.children=[] + for(var item of this.usersdata.info){ + if(item[inputvalue]){ + var found = formateddata.children.some(function(each) { + return each.name[0] === item[inputvalue]; + }); + if (!found) { + + formateddata.children.push({ name: [item[inputvalue]], children: [] }); + for(var each of this.usersdata.info){ + var details=[] + if(each[inputvalue]==item[inputvalue]){ + for(var eachitem in each){ + details.push(each[eachitem]) + } + formateddata.children[formateddata.children.length-1].children.push({name:details}) + } + } + + } + } + } + console.log(formateddata) + 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) { + 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.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.formateddata.header.indexOf(e.target.innerHTML); + console.log(index); + this.selectedvaluedown = this.getIndexValue(index); + this.selectedindexdown = index; + }, + onMouseUp: function(e) { + var index = this.formateddata.header.indexOf(e.target.innerHTML); + var selectedvalueup = this.getIndexValue(index); + this.addIndexValue(index, this.selectedvaluedown); + this.addIndexValue(this.selectedindexdown, selectedvalueup); + } + } +}; + + + +/* + formatUsersData: function() { var formateddata = {}; var areas = []; var cities = []; @@ -83,55 +169,4 @@ export default { } 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) { - 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.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.formateddata.header.indexOf(e.target.innerHTML); - console.log(index); - this.selectedvaluedown = this.getindexvalue(index); - this.selectedindexdown = index; - }, - onmouseup: function(e) { - var index = this.formateddata.header.indexOf(e.target.innerHTML); - var selectedvalueup = this.getindexvalue(index); - this.addindexvalue(index, this.selectedvaluedown); - this.addindexvalue(this.selectedindexdown, selectedvalueup); - } - } -}; - - - +*/ \ No newline at end of file diff --git a/src/components/TableTree.vue b/src/components/TableTree.vue index 81ee3bf..76b8057 100644 --- a/src/components/TableTree.vue +++ b/src/components/TableTree.vue @@ -38,7 +38,7 @@ ul { padding-left: 0px; } td { - width: 10%; + width: 120px; } table { width: 60%;