<Select
@on-query-change="changQuery"
transfer
v-model="userId"
filterable
remote
:remote-method="remoteMethod"
:loading="loading"
style="width: 200px"
>
<Option
v-for="item in defaultList"
:value="item.userId"
:key="item.userId"
>
{{ item.userName }}
</Option>
</Select>
<script>
export default {
data() {
return {
defaultList: [
{ userId: "01", userName: "aaa" },
{ userId: "02", userName: "bbb" },
{ userId: "03", userName: "abc" },
{ userId: "04", userName: "dbc" },
{ userId: "05", userName: "ddd" },
],
searchList: [
{ userId: "06", userName: "aae" },
{ userId: "07", userName: "bbq" },
{ userId: "08", userName: "cce" },
{ userId: "09", userName: "mmr" },
{ userId: "10", userName: "you" },
],
userId: "",
loading: false,
};
},
methods: {
remoteMethod(query) {
if (query != "") {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.defaultList = [];
for (var i = 0; i < this.searchList.length; i++) {
if (this.searchList[i].userName.includes(query)) {
this.defaultList.push(this.searchList[i]);
}
}
}, 300);
}
},
changQuery(query) {
if (query == "") {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.defaultList = [
{ userId: "1", userName: "mark" },
{ userId: "2", userName: "xwj" },
{ userId: "3", userName: "tim" },
{ userId: "4", userName: "tom" },
{ userId: "5", userName: "jerry" },
];
}, 300);
}
},
},
};
</script>