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

'test'

Browse Source
This commit is contained in:
郑茂强 2018-08-23 10:45:10 +08:00
parent c1fcc7a3b2
commit 193f7299f2
1 changed files with 95 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
src/components/Table.vue
View File

@ -4,7 +4,9 @@
<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="appendselection($event)" >{{header}}</th>
<!-- @mousedown="onMouseDown($event)" @mouseup="onMouseUp($event)" @click="formatUsersData($event) " -->
</tr>
</table>
</li>
@ -15,7 +17,6 @@
</li>
</ul>
</div>
</template>
<script>
import TableTree from "@/components/TableTree.vue"; // @ is an alias to /src
@ -28,63 +29,98 @@ export default {
data: function() {
return {
selectedvaluedown: [],
selectedindexdown: 0,
formateddata: {}
formateddata: {},
output:[]
};
},
created: function() {
this.formatusersdata();
console.log(this.formateddata);
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.header = this.usersdata.cate_header;
formateddata.children = [];
for (var item of this.usersdata.info) {
if (areas.indexOf(item.state) === -1) {
areas.push(item.state);
}
appendselection:function(e) {
this.output.push(e.target.innerHTML)
this.formatUsersData(this.output)
}
,
// format company info from object to array
objectToArray(value){
var array=[]
for(var x in value){
array.push(value[x])
}
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) {
for (var item of this.usersdata.info) {
if (
item.city === company.name[0] &&
item.state === citychild.name[0]
) {
var arr = [];
for (var x in item) {
if (x != "state" && x != "city") arr.push(item[x]);
}
company.children.push({ name: arr });
}
}
}
}
this.formateddata = formateddata;
return array
},
//// function below is for swap table header uses.
getindexvalue: function(index) {
//get matched name by userinput return object in array
getName(userinput,data){
var array=[]
var arrayofobject=[]
for(var item of data){
if(array.indexOf(item[userinput])===-1){
array.push(item[userinput])
}
}
for(var each of array){
arrayofobject.push({name:[each]})
}
return arrayofobject
},
//get matched final name's children return array
getFinalChildren(name){
var array=[]
for(var item of this.usersdata.info){
if(Object.values(item).indexOf(name)>-1){
array.push({name:this.objectToArray(item)})
}
}
return array
},
// return object in array
getChildren(name){
var array=[]
for(var item of this.usersdata.info){
if(Object.values(item).indexOf(name)>-1){
array.push(item)
}
}
return array
},
formatUsersData(inputvalue){
var formateddata={};
var currentchildren
for(var x in inputvalue){
var dataholder=[]
//if this is beginning initial structure and data
if(x==0){
formateddata.children=this.getName(inputvalue[x],this.usersdata.info)
currentchildren=formateddata.children
// if only one userselect then output company info
if(inputvalue.length==1){
for(var finalitem of formateddata.children){
finalitem.children=this.getFinalChildren(finalitem.name[0])
}
}
}else{
for(var item of currentchildren){
item.children=this.getName(inputvalue[x],this.getChildren(item.name[0]))
dataholder=dataholder.concat(item.children)
}
currentchildren=dataholder
//if this is final output company info
if(x==inputvalue.length-1){
for(var finalitem of currentchildren){
finalitem.children=this.getFinalChildren(finalitem.name[0])
}
}
}
}
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) {
@ -95,7 +131,7 @@ export default {
}
return array;
},
addindexvalue: function(index, selectedvalue) {
addIndexValue: function(index, selectedvalue) {
var counter = 0;
this.formateddata.header.splice(index, 1, selectedvalue[0]);
@ -108,22 +144,22 @@ export default {
}
}
},
onmousedown: function(e) {
onMouseDown: function(e) {
var index = this.formateddata.header.indexOf(e.target.innerHTML);
console.log(index);
this.selectedvaluedown = this.getindexvalue(index);
this.selectedvaluedown = this.getIndexValue(index);
this.selectedindexdown = index;
},
onmouseup: function(e) {
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);
var selectedvalueup = this.getIndexValue(index);
this.addIndexValue(index, this.selectedvaluedown);
this.addIndexValue(this.selectedindexdown, selectedvalueup);
}
}
};
</script>
<style>
<style >
th,
tr,
td {
@ -134,4 +170,3 @@ table {
border-collapse: collapse;
}
</style>