vue 基于iview的多选和Tag标签的融合

需求如图   项目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>