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