使用饿了么组件的下拉框的可搜索,并且要可以输入中文和数字搜索
先使用正则判断输入的是数字还是中文,然后发送请求
<el-select
v-model="model.cinemaIds"
multiple
filterable
remote
reserve-keyword
placeholder="请输入影院名称"
:remote-method="remoteMethod"
:loading="loading"
>
<el-option
v-for="item in cinemaOptions"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span style="float: left">{{ item.name }}</span>
<span
style="
float: right;
color: #8492a6;
font-size: 13px;
padding-right: 20px;
"
>{{ item.zzCode }}</span
>
</el-option>
</el-select>
async remoteMethod(query) {
if (query !== '') {
if (/[\u4e00-\u9fa5]/.test(query)) {
const res = await getCinemaList({
pageNum: 1,
cinemaName: query
// zzCode: query
});
this.loading = true;
this.cinemaOptions = [];
for (const item of res.data.list) {
this.cinemaOptions.push({
label: item.name,
value: item.id
zzCode:item.zzCode
});
}
this.loading = false;
} else {
const res = await getCinemaList({
pageNum: 1,
zzCode: query
});
this.loading = true;
this.cinemaOptions = [];
for (const item of res.data.list) {
this.cinemaOptions.push({
label: item.name,
value: item.id
zzCode:item.zzCode
});
}
this.loading = false;
}
} else {
this.cinemaOptions = [];
}
},```
分类:
工作日志