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
      }
    },
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值