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>
複製代碼