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

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

使用Elementplus的Autocomplete 组件

		<el-col :span="12"><el-form-item label="身份证号" prop="cardId"><el-autocompletev-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 = truethis.listQuery.cardId = cardIdfetchList(this.listUserQuery).then(response => {this.userList = response.data.dataclearTimeout(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].realnamethis.temp.cardId = findUser[0].cardIdthis.temp.workerNumber = findUser[0].workerNumberthis.temp.phone = findUser[0].phonethis.temp.workerType = findUser[0].workerTypethis.temp.phone = findUser[0].phonethis.temp.sex = findUser[0].sexthis.temp.organizationId = findUser[0].organizationIdthis.temp.userId = findUser[0].idthis.temp.tenantId = findUser[0].tenantId}},

http://www.mrgr.cn/news/16621.html

相关文章:

  • Llamaindex RAG实践
  • 世界上装机量最大的数据库SQLite,低调但不小众
  • 【代码随想录训练营第42期 Day45打卡 - 编辑距离问题 - LeetCode 115.不同的子序列 583. 两个字符串的删除操作 72. 编辑距离
  • unbuntu 安装
  • Java多进程调用dll程序和exe程序
  • python 天气与股票的关系--第2部分,清洗数据
  • 基于yolov8的人头计数检测系统python源码+onnx模型+评估指标曲线+精美GUI界面
  • 求解组合优化问题的具有递归特征的无监督图神经网络
  • 【QNX+Android虚拟化方案】117 - QNX 以太网 iperf3 上行带宽吞吐量低的问题分析优化
  • 操作符详细解析
  • YOLOv9改进策略【模型轻量化】| ShufflenetV2,通过通道划分构建高效网络
  • 数学建模--K-Means聚类分析
  • LMDeploy 量化部署实践闯关任务
  • Lagent 自定义 Agent 智能体
  • 从智慧城市与代理IP看未来科技与个人隐私间的微妙平衡
  • [合集]一汽大众(斯柯达、奥迪、兰博基尼、宾利等)故障代码查询合集
  • python基础(15多线程编程介绍)
  • 怎么快速入门大模型技术——人工智能技术学习方法
  • Java对象的创建过程
  • 【ROS2】PID控制