multi select headers
This commit is contained in:
parent
3824bbc974
commit
42a8f64173
23
src/App.vue
23
src/App.vue
@ -48,13 +48,26 @@ export default {
|
||||
{
|
||||
客户编号: "HUNGC",
|
||||
公司名称: "五金机械",
|
||||
联系人: "苏先生",
|
||||
联系人: "郑先生",
|
||||
称谓: "销售代表",
|
||||
地址: "德昌路甲",
|
||||
邮编: "564576",
|
||||
国家: "德国",
|
||||
国家: "中国",
|
||||
电话: "(053)5556874",
|
||||
传真: "(053)5552376",
|
||||
区域: "东北",
|
||||
城市: "福州"
|
||||
},
|
||||
{
|
||||
客户编号: "HUNGC",
|
||||
公司名称: "五金机械",
|
||||
联系人: "苏先生",
|
||||
称谓: "销售代表",
|
||||
地址: "德昌路甲",
|
||||
邮编: "564577",
|
||||
国家: "德国",
|
||||
电话: "(053)5556875",
|
||||
传真: "(053)5552377",
|
||||
区域: "华北",
|
||||
城市: "北京"
|
||||
},
|
||||
@ -77,10 +90,10 @@ export default {
|
||||
联系人: "王先生",
|
||||
称谓: "市场经理",
|
||||
地址: "英雄山路",
|
||||
邮编: "130083",
|
||||
邮编: "130084",
|
||||
国家: "英国",
|
||||
电话: "(061)15553392",
|
||||
传真: "(061)15557292",
|
||||
电话: "(061)15553393",
|
||||
传真: "(061)15557293",
|
||||
区域: "华北",
|
||||
城市: "秦皇岛"
|
||||
}
|
||||
|
||||
@ -4,8 +4,9 @@
|
||||
<li>
|
||||
<table>
|
||||
<tr>
|
||||
<th v-for="(header,index) in usersdata.cate_header":key="index" @click="formatUsersData($event)">{{header}}</th>
|
||||
<!-- @mousedown="onMouseDown($event)" @mouseup="onMouseUp($event)" -->
|
||||
<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>
|
||||
@ -16,7 +17,6 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import TableTree from "@/components/TableTree.vue"; // @ is an alias to /src
|
||||
@ -29,47 +29,97 @@ export default {
|
||||
data: function() {
|
||||
return {
|
||||
selectedvaluedown: [],
|
||||
|
||||
selectedindexdown: 0,
|
||||
formateddata: {}
|
||||
formateddata: {},
|
||||
output:[]
|
||||
};
|
||||
},
|
||||
created: function() {
|
||||
this.formatUsersData()
|
||||
},
|
||||
methods: {
|
||||
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})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
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])
|
||||
}
|
||||
return array
|
||||
},
|
||||
//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])
|
||||
}
|
||||
}
|
||||
console.log(formateddata)
|
||||
this.formateddata=formateddata
|
||||
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
|
||||
},
|
||||
|
||||
|
||||
//// function below is for swap table header uses.
|
||||
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) {
|
||||
@ -109,64 +159,14 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
<style >
|
||||
th,
|
||||
tr,
|
||||
td {
|
||||
border: black solid 1px;
|
||||
}
|
||||
th{
|
||||
width:200px
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
</style>
|
||||
|
||||
/*
|
||||
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);
|
||||
}
|
||||
}
|
||||
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;
|
||||
},
|
||||
*/
|
||||
@ -16,7 +16,8 @@ export default {
|
||||
props: { data: Object },
|
||||
data: function() {
|
||||
return {
|
||||
open: false
|
||||
open: true
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -33,15 +34,17 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
ul {
|
||||
padding-left: 0px;
|
||||
<style >
|
||||
|
||||
li{
|
||||
list-style-type: none
|
||||
}
|
||||
td {
|
||||
width: 120px;
|
||||
td{
|
||||
width:9%
|
||||
}
|
||||
|
||||
table {
|
||||
width: 60%;
|
||||
width: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user