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

本文主要是介绍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}},

这篇关于ElementPlus下拉框实现可选择，可输入的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---