array struc to tree struc
This commit is contained in:
parent
882d648dec
commit
6c415a0ffe
28
package-lock.json
generated
28
package-lock.json
generated
@ -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",
|
||||
|
||||
91
src/App.vue
91
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>
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
117
src/components/Table.vue
Normal file
117
src/components/Table.vue
Normal file
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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["客户编号"]
|
||||
|
||||
|
||||
["公司名称","联系人"]
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user