el-select实现模糊搜索、远端搜索
实现代码：
<template>
<div class="item-select-wrapper">
<el-select v-model="value1" filterable="filterable" :disabled="disabled" remote="remote" clearable="clearable" :remote-method="doSearch"
:loading="loading" :size="size">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
<div>{{ item.name }}</div>
<div class="info">{{ item.itemNo }}</div>
</el-option>
</el-select>
</div>
</template>
<script>
import { list } from "@/api/list";
export default {
name: 'listSelect',
props: {
value: {
type: [String, Number],
default: null
},
size: {
type: String,
default: 'small'
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
options: [],
loading: false
}
},
computed: {
value1: {
get() {
return this.value
},
set(v) {
this.$emit('input', v)
}
}
},
created() {
this.doSearch();
},
methods: {
doSearch(search) {
list({search}, {page: 0, size: 20}).then(res => {
const {content, totalElements} = res
this.options = content
})
}
}
}
</script>
<style lang="stylus">
</style>
