关于checkbox结合搜索框引起的一个交互上的小问题

最近在写一个项目，上面有一个需求，是要在一个下拉框中添加一个搜索框，可以搜索下拉选项中的内容 一开始我是这么写的

<a-menu-item key="spe" >
  <div>搜索特定字段<a-icon type="up" v-if="searchSpe" style="margin-left: 78px;"></a-icon>
    <a-icon type="down" style="margin-left: 78px;" v-else></a-icon></div>
</a-menu-item>
<template v-if="searchSpe">
  <a-menu-item key="search">
    <a-input-search placeholder="搜索" size="small" v-model="searchColumnsValue" @change="handleSearchChange"/>
  </a-menu-item>
  <a-menu-item style="background-color: #FFFFFF;max-height: 300px">
    <a-checkbox-group
      v-model="checkedList"
      :options="searchColumnsV"
      @change="onChange"
      :default-value="defaultCheckedList"
      style="display: flex; flex-direction: column;"
    />
  </a-menu-item>
复制代码

当我输入搜索内容时，searchColumnsValue跟着改变，同时searchColumnsV是个计算属性，随着searchColumnsValue改变也跟着改变，就完成了我搜索的需求 如图所示

但是这样做会出现一个交互上的bug，就是当我选中了下面复选框的内容时，我再去填写搜索内容，然后再点击搜索出来的复选框，然后再清除搜索内容，原来消失的复选框应该是选中状态的，现在变成未选中状态了，如下图所示

于是为了解决这个问题，我也考虑了很多，像是用defaultValue默认选中，或者用localStorage储存选中状态，都无法完美解决。 后来我想起来了我可以通过a-checkbox自带的checked属性，解决这个问题 大体思路就是我创建一个大数组，也就是searchColumnsV，这个数组里面每一项包含3个属性，label,value和checked，label保存选项值，value保存选项id，checked保存选中状态，然后我通过v-for遍历这个大数组，生成每一个复选项，checked属性就绑定大数组的每一项的checked属性，就可以完美解决我遇到的这个问题了，代码如下

<a-menu-item key="spe" >
  <div>搜索特定字段<a-icon type="up" v-if="searchSpe" style="margin-left: 78px;"></a-icon>
    <a-icon type="down" style="margin-left: 78px;" v-else></a-icon></div>
</a-menu-item>
<template v-if="searchSpe">
  <a-menu-item key="search">
    <a-input-search placeholder="搜索" size="small" v-model="searchColumnsValue"/>
  </a-menu-item>
  <a-menu-item style="background-color: #FFFFFF;max-height: 300px">
    <a-checkbox-group
      v-model="checkedList"
      @change="onChange"
      style="display: flex; flex-direction: column;"
    >
      <a-checkbox v-for="(item,index) in searchColumnsV" :key="index" :value="item.value" :checked="item.checked" v-show="showSearchFields(item.label)">
        <span :title="item.label">{{ item.label }}</span>
      </a-checkbox>
    </a-checkbox-group>
  </a-menu-item>
复制代码

这里change事件要将searchColumnsV里面找到对应的选项，并将checked赋值为true即可,而搜索功能的实现通过showSearchFields这个方法来实现，方法如下

showSearchFields(e) {
  if(this.searchColumnsValue == '' || this.searchColumnsValue == null) {
    return true
  } else {
    return e.includes(this.searchColumnsValue)
  }
}
复制代码

至此，我的问题得以解决 虽然可能只是一个很小的问题，但是确实困扰了很久，希望能帮助到大家