效果圖
<el-form-item
prop="storeId"
label="所屬門店"
>
<el-select
v-model="queryParams.storeId"
placeholder="請(qǐng)輸入"
filterable
remote
:remote-method="remoteStore"
clearable
class="w-all"
>
<el-option
v-for="item in storeOptions"
:key="item.id"
:label="item.name+'/'+item.id"
:value="item.id"
/>
</el-select>
</el-form-item>
data(){
return{
storeOptions: [], // 所屬門店
}
},
methods:{
// 所屬門店 - 遠(yuǎn)程商家下拉框搜索
async remoteStore(query) {
if (query !== '') {
this.loading = true
await this.getListChooseStore(query)
this.loading = false
} else {
// 沒輸入時(shí)為空數(shù)組
this.storeOptions = []
}
},
// 所屬門店 - 商家遠(yuǎn)程下拉框接口
async getListChooseStore(query) {
let queryData = {}
// 純數(shù)字,數(shù)字字符串就用id宴合，不是就用name
const isNumber = /^\d+$/.test(query)
if (isNumber) {
queryData = { id: query }
} else {
queryData = { name: query }
}
const { code, rows } = await listChooseStore(queryData)
if (code === 0) {
this.storeOptions = rows
}
},
}
