expand by header selection
This commit is contained in:
parent
3f9920ee2a
commit
3824bbc974
50
src/App.vue
50
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: "秦皇岛"
|
||||
区域: "华北",
|
||||
城市: "秦皇岛"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
<li>
|
||||
<table>
|
||||
<tr>
|
||||
<th v-for="(header,index) in usersdata.cate_header" @mousedown="onmousedown($event)" @mouseup="onmouseup($event)" :key="index">{{header}}</th>
|
||||
<th v-for="(header,index) in usersdata.cate_header":key="index" @click="formatUsersData($event)">{{header}}</th>
|
||||
<!-- @mousedown="onMouseDown($event)" @mouseup="onMouseUp($event)" -->
|
||||
</tr>
|
||||
</table>
|
||||
</li>
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
th,
|
||||
tr,
|
||||
td {
|
||||
border: black solid 1px;
|
||||
}
|
||||
th{
|
||||
width:200px
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
</style>
|
||||
|
||||
/*
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
th,
|
||||
tr,
|
||||
td {
|
||||
border: black solid 1px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
</style>
|
||||
|
||||
*/
|
||||
@ -38,7 +38,7 @@ ul {
|
||||
padding-left: 0px;
|
||||
}
|
||||
td {
|
||||
width: 10%;
|
||||
width: 120px;
|
||||
}
|
||||
table {
|
||||
width: 60%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user