Reference: https://www.jb51.net/article/147917.htm
Thinking
First, check the checkbox, the corresponding tag appears:
1. The use of watch monitor changes checkboxes bound value A (array);
2. A change in the cycle to get checked check box corresponding to the name of the id, the id and the corresponding formation of a new object name array;
3. the array of objects obtained by step, to the weight (product requirements, tag can not appear in duplicate) B obtained result;
4. Tags assigned to the B, cycle through it;
Second, click the Delete button on the tag, delete the current tag, and the corresponding checkbox checked uncheck:
1. Click on the button to remove the tag when the tag to get the current C of the above mentioned id;
2. execution method to get rid of A in C;
3.watch event to re-enter the first step of the method;
Summary: listening checkbox corresponding model A, according to the change of A, take the name corresponding to the id, assigned to the tag for display, tag deletion events in turn to control the change of A, re-enter the watch events in the method
Sounds simple, clear thinking probably, to talk about the code corresponding to the above ideas, problems encountered behind revisit pit
<el-row type="flex" justify="between">
<el-col :span="24">
<!--tag展示区-->
<el-row>
<el-tag class="tagClass" v-for="(tag,index) in tags" :key="index" closable @close="handleClose(tag)" :type="tag.id" size="mini">
{{tag.name}}
</el-tag>
<el-button v-if="tags.length>0" @click="clearAll" plain size="mini">全部删除</el-button>
</el-row>
<!--表单-->
<el-form :model="tempForm" ref="tempForms" class="choose_tag">
<p class="tag_title">选择标签</p>
<!-- 多选人员 -->
<el-checkbox-group v-model="tempForm.checkboxGroup5" size="mini">
<el-checkbox border v-for="(item,index) in checkBox" @change="perChange(item)" :label="item.id" :key="index">{{item.name}}</el-checkbox>
</el-checkbox-group>
</el-form>
</el-col>
</el-row>
export default {
data() {
return {
Tags: [],
tempForm: {
checkboxGroup5: [], the selected personnel @
},
detailData: [],
checkBox: [{
name: 'red',
ID: '101'
},
{
name: 'Huang' ,
ID: '100'
}, {
name: 'Bob',
ID: '102'
}, {
name: 'Bob',
ID: '102'
}]
}
},
methods:{
clearAll () {// Clear all data
this.tags = []
this.tempForm.checkboxGroup5 = []
},
perChange (Item) {
this.detailData.push (Item)
},
handleClose (Tag) {// delete the tag event
// remove the current tag to delete
the let yourChoseTags = this.tempForm.checkboxGroup5
this.tempForm.checkboxGroup5 = yourChoseTags.filter (Item => {
IF (tag.id! == Item) {
return to true
}
})
},
delRepeat ( arr) {// array object to re-
return Object.values (
arr.reduce ((obj, Next) => {
var Key = the JSON.stringify (Next);
return (obj [Key] Next =), obj;
}, } {),
);
},
moreArr () {
yourChose = this.tempForm.checkboxGroup5 let
let tempTags = []
tempTags = this.baseDataDetail (yourChose, this.checkBox, tempTags)
this.detailData = tempTags
},
baseDataDetail (yourChose, baseData, callBack) {// Array method of packaging
let callBack = TEMP
// get the data two cycles corresponding to the selected initial data id of the checkbox
yourChose.forEach (Item => {
baseData.forEach (itemSecond => {
IF (Item === itemSecond.id) {
temp.push (itemSecond)
}
})
})
return TEMP
}
},
watch: {
detailData() {
let tempArr = Object.assign([], this.detailData)
tempArr = this.delRepeat(tempArr)
// console.log(tempArr)
this.tags = tempArr
},
"tempForm.checkboxGroup5" () {
this.moreArr()
}
}
}
</script>
It is noteworthy point:
1. My method in a multi-box binding value of listening events tempForm.checkboxGroup5 in the end, may have been a repeat data (duplicate id with name), and then assign this array contains duplicate data objects to another array detailData, listening watch in this array, go after the complete re-assignment to the tags for display.
Why did it because our needs, in addition to the current page checkbox to select personnel, the components of the whole company as well as a choice, so people no matter which channel is selected from the final results can point to detailData, guarantee rendering correct
2. to re-array object, there may be heavy initial data id, the same name as the object (Bob), even if the check box binding model does not duplicate a value in the id, but the use of name id corresponding to the time taken , or will detect the number of such tag may display duplicate
so use this method, you can ensure that the final processed data is not repeated, the tag will not show more of the same,
but the approach is somewhat inflexible place that is, the data you have to deal ({id: 1, name: ' Bob', type: now}) must id, name, type repeat time, will be de-emphasis,
expanding: can be an array of objects that you set in accordance with a property in the dynamic deduplication
3. I started to do the tag of presentation logic on the checkboxes event of change, because change event where you can get the name and id of the currently selected at the same time, however, change when you do not know if this is still in check in unchecked, such tags display will be a problem;