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 才可以。对应的代码可查看 https://github.com/vueBlog/example-ant-design-vue/blob/master/src/views/Select.vue#L53 ,对应的实例可查看 https://www.fxss.work/example-ant-design-vue/#/select

设置筛选

select 在有些情况下需要支持搜索,可以有多种方式进行设置。

下述方式的详细代码可查看 https://github.com/vueBlog/example-ant-design-vue/blob/master/src/views/Select.vue#L130 ,代码实例可查看 https://www.fxss.work/example-ant-design-vue/#/select

方式一

设置optionFilterPropchildren

<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设置为labela-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>

方式三

使用filterOptionoptionLabelProp ,当filterOption为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 falseoptionLabelProp为回填到选择框的 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>
### 关于 `ant-design-vue` Select 组件实现懒加载 在 `ant-design-vue` 中,Select 组件可以通过配置特定属性来支持数据的懒加载。这通常涉及到当用户输入或打开下拉菜单时动态获取选项列表。 #### 使用 `showSearch` 和 `filterOption` 为了触发懒加载行为,可以启用 `showSearch` 属性让组件能够响应用户的键盘输入事件,并通过自定义函数处理这些事件以发起异步请求获取远程数据[^1]。 ```vue <template> <a-select show-search :loading="loading" @search="handleSearch" placeholder="请输入关键字查询" option-label-prop="children" style="width: 200px;" > <!-- 动态渲染选项 --> <a-select-option v-for="(item, index) in options" :key="index">{{ item.label }}</a-select-option> </a-select> </template> <script> export default { data() { return { loading: false, options: [] }; }, methods: { handleSearch(value) { this.loading = true; setTimeout(() => { // 模拟网络延迟后的回调操作 const result = fetchOptionsFromServer(value); // 假设这是从服务器端取回的数据方法 this.options = result.map(item => ({ label: item.text })); this.loading = false; }, 300); } } }; </script> ``` 上述代码展示了如何监听搜索框内的变化并执行相应的逻辑去更新可选项目列表。这里假设存在一个名为 `fetchOptionsFromServer()` 的服务接口用于模拟向后端发送请求的过程,在实际应用中应当替换为此处省略的真实API调用[^2]。 另外需要注意的是,对于分页场景下的懒加载,则需额外关注页面切换时重新加载对应页码的数据集;而对于无限滚动模式,则要计算当前可视区域内最后一条记录的位置以便决定何时触发展开更多项的操作[^3]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值