vue点击勾选出现tag标签
<template>
<div class="flex" id="items">
<el-row type="flex" justify="between">
<el-col :span="24">
<!--表单-->
<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>
<!--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-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
tags: [],
tempForm: {
checkboxGroup5: [], //选择的人员
},
detailData: [],
checkBox: [{
name: '小红',
id: '101'
},
{
name: '小黄',
id: '100'
}, {
name: '小明',
id: '102'
}, {
name: '小明',
id: '102'
}
]
}
},
methods: {
clearAll() { //全部清空数据
this.tags = []
this.tempForm.checkboxGroup5 = []
},
perChange(item) {
this.detailData.push(item)
},
handleClose(tag) { //标签的删除事件
// 去掉当前删除的tag
let yourChoseTags = this.tempForm.checkboxGroup5
this.tempForm.checkboxGroup5 = yourChoseTags.filter(item => {
if (tag.id !== item) {
return true
}
})
},
delRepeat(arr) { //数组对象去重
return Object.values(
arr.reduce((obj, next) => {
var key = JSON.stringify(next);
return (obj[key] = next), obj;
}, {}),
);
},
moreArr() {
let yourChose = this.tempForm.checkboxGroup5
let tempTags = []
tempTags = this.baseDataDetail(yourChose, this.checkBox, tempTags)
this.detailData = tempTags
},
baseDataDetail(yourChose, baseData, callBack) { //封装的数组方法
let temp = callBack
// 循环两个数据拿到选择的checkbox的id对应的初始数据
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>
