需求如图 项目demo演示地址 https://run.iviewui.com/5NOmf41O
废话不多说,上代码直接
<template>
<div>
<span>已选择</span>
<div id="chatContainer" class="tagWrap mg-tp-10">
<Tag class="modalTags" v-for="item in tagCount" :key="item.id"
size="medium" :name="item" closable @on-close="handleClose2">{{
getOperationName(item)}}</Tag>
</div>
</div>
<div class="searchWrap display-flex">
<Input v-model="checkBoxCountName" />
</div>
<div class="checkBoxWrap">
<CheckboxGroup v-model="tagCount" @on-change="handleClose2">
<div class="mg-tp-10" v-for="item in fcheckBoxCount"
:key="item.id">
<Checkbox :label="item.id" >{{item.name}}</Checkbox>
</div>
</CheckboxGroup>
</div>
</template>
<script>
export default {
data () {
return {
checkBoxCountName: '',
tagCount: [],
checkBoxCount: [
{id: 1, name: '红包1'},
{id: 2, name: '我的红包2'},
{id: 3, name: '他的红包3'},
{id: 4, name: '王麻子红包4'},
{id: 5, name: '章三红包5'},
{id: 6, name: '红包6'},
]
}
},
methods: {
getOperationName(id) {
let data = this.checkBoxCount.find((item) => {
return item.id === id
})
return data.name
},
handleAdd () {
if (this.count.length) {
this.count.push(this.count[this.count.length - 1] + 1);
} else {
this.count.push(0);
}
},
handleClose2 (event, name) {
if (name) {
const index = this.tagCount.indexOf(name)
this.tagCount.splice(index, 1)
}
},
},
computed: {
fcheckBoxCount () {
let fcheckBoxCount
fcheckBoxCount = this.checkBoxCount.filter((item)=> {
return item.name.indexOf(this.checkBoxCountName) !== -1
})
return fcheckBoxCount
}
}
}
</script>