76 lines
1.4 KiB
Vue
76 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<el-select
|
||
|
|
style="width: 100%"
|
||
|
|
v-model="val"
|
||
|
|
remote
|
||
|
|
:remote-method="getOptions"
|
||
|
|
filterable
|
||
|
|
reserve-keyword
|
||
|
|
:placeholder="placeholder"
|
||
|
|
:loading="loading"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item of options"
|
||
|
|
:value="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:key="item.value"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { appGetByEqPhone } from '@/api/app/user'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "UserSearchInput",
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: String,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
placeholder: {
|
||
|
|
type: String,
|
||
|
|
default: "请输入用户手机号搜索"
|
||
|
|
},
|
||
|
|
initOptions: {
|
||
|
|
type: Array,
|
||
|
|
default: () => ([])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
options: [],
|
||
|
|
loading: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
val: {
|
||
|
|
set(val) {
|
||
|
|
this.$emit('input', val);
|
||
|
|
},
|
||
|
|
get() {
|
||
|
|
return this.value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
console.log(this.initOptions);
|
||
|
|
this.options = this.initOptions;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getOptions(keyword) {
|
||
|
|
this.loading = true;
|
||
|
|
appGetByEqPhone(keyword).then(res => {
|
||
|
|
if (res.code === 200 && res.data != null) {
|
||
|
|
this.options = [{value: res.data.userId, label: res.data.realOrUserName}];
|
||
|
|
} else {
|
||
|
|
this.options = [];
|
||
|
|
}
|
||
|
|
}).finally(() => {
|
||
|
|
this.loading = false;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|