＜a-select/＞对已获取的数据进行模糊查询

最新推荐文章于 2024-07-01 16:41:08 发布

ffl886

最新推荐文章于 2024-07-01 16:41:08 发布

阅读量1.2k

点赞数 1

文章标签： javascript ant

本文链接：https://blog.csdn.net/ffl886/article/details/122822903

版权

HTML：

<a-col :span="5">
        <label class="label-title">环节:</label>
        <a-select style="width: 80%;"
         placeholder="请选择环节" 
         class="select-option" 
         :allowClear="allowClear"
          :showSearch="showSearch" 
          option-filter-prop="children"
          :filter-option="filterOption"
          :maxTagCount="1" @change="handleChangeDetail" v-model="detailCode"
          >
          <a-select-option v-for="item in linkDetails" :key="item.linkDetailCode" :value="item.linkDetailCode">
            {{ item.linkDetailName }}
          </a-select-option>
        </a-select>
      </a-col>

JS:

/**
   * 实现环节搜索:拼接及汉字模糊搜索
   */
  filterOption(input, option) {
    return (
      option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    );
  }