过滤
2019-03-29 本文已影响0人
Clover园
<template>
<div id="we">
<ul>
<li v-for="i in labels" :key="i.labelNameId">
<CheckboxGroup v-model="disabledGroup" @on-change="change">
<Checkbox
v-for="item in i.labelValves"
:label="i.labelNameId + ':' + item.labelId"
:key="item.labelId"
>{{item.labelValue}}</Checkbox>
</CheckboxGroup>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
disabledGroup: [],
selectLabels: [],
selectLabelsInfo: [],
labels: [
{
labelName: "配置一",
labelNameId: 1,
labelValves: [
{ labelId: 101, labelValue: "一一" },
{ labelId: 102, labelValue: "一二" }
]
},
{
labelName: "配置二",
labelNameId: 2,
labelValves: [
{ labelId: 201, labelValue: "二一" },
{ labelId: 202, labelValue: "二二" }
]
},
{
labelName: "配置三",
labelNameId: 3,
labelValves: [{ labelId: 301, labelValue: "三一" }]
}
]
};
},
methods: {
change(data) {
let obj = {};
this.selectLabels = [];
this.disabledGroup = data;
data.map(label => {
this.labels.forEach(i => {
let valArr = [];
if (label.split(":")[0] === i.labelNameId + "") {
i.labelValves.forEach(l => {
if (label.split(":")[1] === l.labelId + "") {
valArr.push(l);
}
});
obj = {
labelName: i.labelName,
labelNameId: i.labelNameId,
labelValves: valArr
};
this.selectLabels.push(obj);
}
});
});
let temp = {};
let newArry = [];
this.selectLabels.map(i => {
var key = i.labelNameId;
if (temp[key]) {
let arr = temp[key].labelValves.concat(i.labelValves);
temp[key].labelValves = arr;
temp[key].labelNameId = i.labelNameId;
temp[key].labelName = i.labelName;
} else {
temp[key] = {};
temp[key].labelValves = i.labelValves;
temp[key].labelNameId = i.labelNameId;
temp[key].labelName = i.labelName;
}
});
for (var k in temp) {
newArry.push(temp[k]);
}
this.selectLabelsInfo = newArry.slice(0, newArry.length);
}
}
};
</script>