mqzheng/Table
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

basic expand

Browse Source
This commit is contained in:
郑茂强 2018-08-20 11:39:27 +08:00
parent 46f0603243
commit 286cbee336
5 changed files with 311 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@ -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"
};

46
src/components/SwapTable2.vue
View File

@ -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);
}
}
};

236
src/components/swap_expand_table.vue Normal file
View File

@ -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>

47
src/components/swap_expand_tree.vue Normal file
View File

@ -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>

261
src/components/swap_table.vue
View File

@ -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)
*/