a-select选择框输入时实现自动过滤

188 阅读1分钟

场景:当后端接口将全部枚举数据返回时,前端不掉用接口自动实现模糊搜索查询枚举

方式一:通过optionFilterProp="label"

            <a-select
                placeholder="请输入"
                :show-arrow="false"
                allowClear
                :showSearch="true"
                v-model="searchForm.invoiceMajor"
                optionFilterProp="label"
                :getPopupContainer="
                  (triggerNode) => {
                    return triggerNode.parentNode || document.body
                  }
                "
                :defaultActiveFirstOption="false"
              >
                <a-select-option
                  v-for="item in invoiceMajorOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  >{{ item.label }}</a-select-option
                >
              </a-select>

方式二:通过filterOption=“filterOption”

// 将输入的内容与显示的内容进行匹配
    filterOption(value, option) {
      console.log(value, option)
      return option.componentOptions.children[0].text.indexOf(value) >= 0
    },