当前位置: 首页 > article >正文

ElementPlus下拉框实现可选择,可输入

使用Elementplus的Autocomplete 组件

		<el-col :span="12">
          <el-form-item label="身份证号" prop="cardId">
            <el-autocomplete
              v-model="temp.cardId"
              :fetch-suggestions="querySearchUser"
              placeholder="请输入身份证号码"
              clearable
              @clear="clearUser"
              @select="handleSelect"
            />
          </el-form-item>
        </el-col>

querySearchAsync 方法接收一个 queryString 和一个 cb 回调函数。它会根据 queryString 过滤 options 数组,并将结果转换为只包含 value 字段的对象数组,然后通过 cb 函数返回给 ElAutocomplete 组件。
createFilter 方法用于定义如何过滤 options 数组。
handleSelect 方法会在用户选择了一个项后被调用,打印出选中的项。如果需要获取该选项的 key 值,可以通过查找 options 数组来获取。

:fetch-suggestions=“querySearchUser”

	querySearchUser(cardId, cb) {
      this.listLoading = true
      this.listQuery.cardId = cardId
      fetchList(this.listUserQuery).then(response => {
        this.userList = response.data.data
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          cb(this.userList.map(item => ({ value: item.cardId })))
        }, 3000 * Math.random())
        cb(this.userList)
        this.listLoading = false
      })
    },
// 处理选中项
    handleSelect(user) {
      const findUser = this.userList.filter(item => item.cardId === user.value)
      if (findUser) {
        this.temp.realname = findUser[0].realname
        this.temp.cardId = findUser[0].cardId
        this.temp.workerNumber = findUser[0].workerNumber
        this.temp.phone = findUser[0].phone
        this.temp.workerType = findUser[0].workerType
        this.temp.phone = findUser[0].phone
        this.temp.sex = findUser[0].sex
        this.temp.organizationId = findUser[0].organizationId
        this.temp.userId = findUser[0].id
        this.temp.tenantId = findUser[0].tenantId
      }
    },

http://www.kler.cn/news/285221.html

相关文章:

  • pm2 + linux + nginx
  • C++拷贝构造函数
  • 智能儿童对讲机语音交互,乐鑫ESP-RTC音视频通信,ESP32无线语音方案
  • JAVA:文字写入图片、图片插入图片
  • 睿考网:2024年中级经济师考试备考技巧
  • Java设计模式【享元模式】-结构型
  • mac在终端中使用vscode打开文件或者文件夹
  • PowerShell脚本编写:自动化Windows开发工作流程
  • audiocraft - 免费文本转音乐、AI音乐生成、AI音乐创作工具,Facebook开源,本地一键整合包下载
  • Redisson 实现分布式锁
  • 类和对象(4)
  • zabbix对接Grafana
  • Linux的远程登录教程(超详细)
  • 排序算法之桶排序详细解读(附带Java代码解读)
  • 模型 错位竞争(战略规划)
  • 从Vuex 到 Pinia,Vue 状态管理的进化
  • HTB-sequal(mysql)
  • 十一. 常用类
  • 如何开发针对不平衡分类的成本敏感神经网络 python
  • 遇到“Interpreter parsed an intent ‘xxx‘ which is not defined in the domain“报错
  • 贵州大数据实验室建设案例分享
  • vue调用booststrap弹窗
  • 大数据-112 Flink DataStreamAPI 程序输入源 DataSource 基于文件、集合、Kafka连接器
  • Linux随记(十一)
  • android 14及android15 READ_EXTERNAL_STORAGE跟相册,视频权限的适配
  • GraphRAG 文本分割优化
  • 深度学习100问31:如何降低语言模型的困惑度
  • yolov8旋转目标检测部署教程(附代码c++_python)
  • 在Java中,获取输入内容可以通过多种方式实现,以下是三种常用的方式:Scanner、BufferedReader 和 Console 的具体代码示例
  • chromedriver下载地址