您的位置:首页 > 房产 > 建筑 > ElementPlus下拉框实现可选择,可输入

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

2024/10/6 8:24:09 来源:https://blog.csdn.net/weixin_45816407/article/details/141759957  浏览:    关键词: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}},

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com