ant-design-vue select 使用汇总

最近使用ant-design-vue，在使用select的时候遇到一些特殊状况，特此作一下整理汇总。

首先实例中的下拉选中为：

const options = [
  {
    name: '北京',
    id: '00001',
    spell: 'beijing',
    simpleSpell: 'bj'
  },
  {
    name: '上海',
    id: '00002',
    spell: 'shanghai',
    simpleSpell: 'sh'
  },
  {
    name: '广东',
    id: '00003',
    spell: 'guangdong',
    simpleSpell: 'gd'
  },
  {
    name: '深圳',
    id: '00004',
    spell: 'shenzhen',
    simpleSpell: 'sz'
  },
  {
    name: '重庆',
    id: '00005',
    spell: 'chongqing',
    simpleSpell: 'cq'
  },
  {
    name: '西安',
    id: '00006',
    spell: 'xian',
    simpleSpell: 'xa'
  }
]
复制代码

设置默认值

设置默认值defaultValue或者当前选中值为value空字符串''/null 时，placeholder 都没法正常展现，须要设置为undefined 才能够。对应的代码可查看 github.com/vueBlog/exa… ，对应的实例可查看 www.fxss.work/example-ant… 。

设置筛选

select 在有些状况下须要支持搜索，能够有多种方式进行设置。

下述方式的详细代码可查看 github.com/vueBlog/exa… ，代码实例可查看 www.fxss.work/example-ant… 。

方式一

设置optionFilterProp为children。

<a-select showSearch allowClear optionFilterProp="children" placeholder="请选择选项" style="width: 120px; margin-right: 16px">
  <a-select-option v-for="item in options" :key="item.code" :value="item.id">
    {{ item.name }}
  </a-select-option>
</a-select>
复制代码

多选也一样适用：

<a-select mode="multiple" allowClear optionFilterProp="children" placeholder="请选择选项" style="width: 100%">
  <a-select-option v-for="item in options" :key="item.code" :value="item.id">
    {{ item.name }}
  </a-select-option>
</a-select>
复制代码

方式二

将optionFilterProp设置为label和a-select-option的:label="item.name"自定义属性

<a-select showSearch allowClear optionFilterProp="label" placeholder="请选择选项" style="width: 120px; margin-right: 16px">
  <a-select-option v-for="item in options" :key="item.code" :value="item.id" :label="item.name">
    {{ item.name }}
  </a-select-option>
</a-select>
复制代码

多选：

<a-select mode="multiple" allowClear optionFilterProp="label" placeholder="请选择选项" style="width: 100%">
  <a-select-option v-for="item in options" :key="item.code" :value="item.id" :label="item.name">
    {{ item.name }}
  </a-select-option>
</a-select>
复制代码

方式三

使用filterOption和optionLabelProp ，当filterOption为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。optionLabelProp为回填到选择框的 Option 的属性值。

适用filterOption能够实现更多的功能，好比中文搜索、拼音搜索、简拼搜索。

<a-select showSearch allowClear :filterOption="filterOption" optionLabelProp="label" placeholder="请选择选项" style="width: 120px; margin-right: 16px">
  <a-select-option v-for="item in options" :key="item.code" :value="item.id" :label="item.name" :spell="item.spell" :simpleSpell="item.simpleSpell">
    {{ item.name }}
  </a-select-option>
</a-select>
复制代码

filterOption (inputValue, option) {
  console.log(inputValue, option)
  // 在option的componentOptions.propsData中只有value和label，也就是说其余自定义属性没有接收，因此只能本身去查找
  let currentOption
  for (let index = 0, len = this.options.length; index < len; index++) {
    const element = this.options[index]
    if (element.id === option.componentOptions.propsData.value) {
      currentOption = element
      break
    }
  }
  return currentOption.name.includes(inputValue) || currentOption.spell.includes(inputValue) || currentOption.simpleSpell.includes(inputValue)
}
复制代码

至于多选状况，filterOption 方法和上述一致，就是template有点区别：

<a-select mode="multiple" allowClear :filterOption="filterOption" optionLabelProp="label" placeholder="请选择选项" style="width: 100%">
  <a-select-option v-for="item in options" :key="item.code" :value="item.id" :label="item.name" :spell="item.spell" :simpleSpell="item.simpleSpell">
    {{ item.name }}
  </a-select-option>
</a-select>
复制代码