使用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}},