可远程搜索的a-select组件

Sherry Tian

已于 2024-01-24 22:51:09 修改

阅读量1.2k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： ant-design-vue项目实战文章标签： javascript vue.js 前端 anti-design-vue

于 2024-01-24 22:48:46 首次发布

本文链接：https://blog.csdn.net/misstianyun/article/details/135833112

ant-design-vue项目实战专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Vue中使用a-select组件实现下拉框的多选功能，支持远程搜索，包括设置选项过滤、无数据展示和数据加载逻辑。作者还分享了loadDeclarationPull和handleSearchCode方法的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能齐全的a-select下拉组件，可多选，可远程搜索
在这里插入图片描述

多选，可远程搜索，下拉框组件

<a-form-item label="合同编号" v-bind="formItemLayout">
          <a-select
            allowClear
            showSearch
            mode="multiple"
            optionFilterProp="children"
            :filter-option="false"
            :not-found-content="null"
            @search="handleSearchCode"
            @change="handleChangeCode"
            v-decorator="[
              'tcontractCode',
              {
                rules: [{ required: true, message: '请选择合同编号，支持模糊匹配' }]
              }
            ]"
            placeholder="请选择合同编号，支持模糊匹配"
          >
            <a-select-option v-for="item in tcontractCodeList" :value="item.label" :key="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>

远程搜索首先需要设置showSearch,不使用本地数据搜索:filter-option="false",无数据时什么都不显示:not-found-content="null",设置多选模式mode="multiple",搜索函数handleSearchCode

// 远程查询函数
loadDeclarationPull (_name) {
  const _this = this
  return new Promise(resolve => {
    getDeclarationPull({ name: _name }).then(res => {
      _this.tcontractCodeList = res || []
      resolve()
    })
  })
},
// 搜索函数
handleSearchCode (value) {
  this.loadDeclarationPull(value)
},

清空数据时候allowClear调用handleChangeCode函数，清空下拉框数据重新加载全部下拉数据

handleChangeCode (value) {
  // 判断一下value不存在就加载全部数据
  if (!value || value.length < 1) {
    this.loadDeclarationPull()
  }
},

以上总结是写给别人更是写给自己，如有不对的地方或者更好的方法，欢迎留言交流，在探索的路上与君共勉！