vue-ant-design v-for渲染多选框绑定值问题

先上效果图------支持显示搜索历史

html部分

搜索历史页签

<div class="searchHistory">

            <span>已搜：</span>

            <template v-for="(tag) in tags">

              <a-tag :key="tag" closable @close="() => handleClose(tag)">{{ tag }}</a-tag>

            </template>

            <template v-for="(tag) in tagsCheck">

              <a-tag :key="tag" @close="() => handleClose2(tag)">{{ tag }}</a-tag>

            </template>

          </div>

多选框

<div v-for="(item,index) in options" :key="index">

              <a-row>

                <a-col :span="3">

                  <div style>{{item.label}}</div>

                </a-col>

                <a-col :span="21">

                  <a-checkbox-group

                    style

                    name="checkboxgroup"

                    :options="item.children"

                    v-model="tagsValue[index]"

                    @change="onChange"

                  ></a-checkbox-group>

                </a-col>

              </a-row>

              <a-divider />

            </div>

js

 options: [

        {

          label: "任务类型:",

          children: [

            { label: "科研类", value: "科研类" },

            { label: "订购类", value: "订购类" },

            { label: "维修类", value: "维修类" },

            { label: "建设类", value: "建设类" },

            { label: "其他", value: "其他" }

          ]

        },

        {

          label: "主管业务部门:",

          children: [

            { label: "综合计划局", value: "综合计划局" },

            { label: "信息系统局", value: "信息系统局" },

            { label: "科研订购局", value: "科研订购局" },

            { label: "试验鉴定局", value: "试验鉴定局" }

          ]

        },

]

 onChange(val) {

      // this.tagsCheck = this.tagsValue.reduce(function(a, b) {

      //   // return a.concat(b);

      // });

      let arr = []

      let searchCheckList = this.checkList

         this.tagsValue.forEach((item,index)=>{

           item.forEach((i)=>{

             arr.push({

              [searchCheckList[index].label]:i

             })

       arr.forEach((item,index)=>{

         arr[index] = this.removeBlock(JSON.stringify(item).split('"').join('').replace(":","："))

       })

      this.tagsCheck = arr

      this.page = 1

      this.size = 10

      this.current = 1

      this.fetchList(this.inputValue, this.tagsValue, {});

}

handleClose2(removedTag) {

      const tags = this.tagsValue.filter(tag => tag !== removedTag);

      console.log(tags, "tags");

      console.log(removedTag, "removedTag");

      this.tagsValue.forEach(item => {

        item.forEach((q, index) => {

          if (q == removedTag.split("：")[1]) {

            item.splice(index, 1);

          }

        });

      });

      this.onChange();

       this.current = 1

      console.log(this.tagsCheck, "tagsCheck");

    },