Ant Desing 单选框 和 级联选择 树节点 搜索功能

记录一下

单选

:filterOption="filterOption" 这个属性才是搜索的关键

<a-select
  v-model="form.space"
  show-search                
  :filterOption="filterOption"                
  style="width: 10vw"                
  label-in-value                
  :placeholder="this.$t('m.PleaseSelect')"                
  @change="onaChange"                
 >
  <a-select-option v-for='(item,index) in SpaceOptions' :key="index" :value='item.key'>
     {{item.label}}
  </a-select-option>
</a-select>

与之对应的还有一个方法

// 输入框筛选功能
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },

级联选择搜索

:show-search="{ filter }" 关键属性

这里有一个坑 你这里自定义匹配的 label 名称在搜索方法中会用到 我这自定义的label 名称为name

<a-cascader
  :show-search="{ filter }"
   v-model='form.EquipmentType'
   style="width: 10vw;"
   :allowClear=false
   :options="indicatorsTypeList"
   :field-names="{label: 'name', value: 'id', children: 'properties' }"
   expand-trigger="hover"
   :placeholder="$t('m.PleaseSelect')"
   @change="cascaderonChange"
  />

这里的option.name 的name是要对应你自定义的label 名相同

filter(inputValue, path) {
      return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },

数节点选择搜索

show-search

tree-node-filter-prop="title"

两个关键属性  

                <a-tree-select
                  v-model="form.EquipmentType"
                  style="width: 10vw"
                  :tree-data="indicatorsTypeList"
                  :replaceFields="{children:'properties', title:'name', key:'id', value: 'id'}"
                  multiple
                  placeholder="Please select"
                  search-placeholder="Please select"
                  :maxTagCount="2"
                  labelInValue
                  show-search
                  tree-node-filter-prop="title"
                  @change="cascaderonChange"
                />