对你有帮助点个赞
<el-form-item label="关联企业名称：" prop="companyData">
<el-select
style="width: 200px"
v-model="formData.companyData"
:popper-append-to-body="false"
filterable
remote
:disabled="dialogTitle == '编辑资源池'"
reserve-keyword
:remote-method="handleRemoteMethod"
:loading="companyLoading"
value-key="companyId"
clearable
placeholder="可按企业名称搜索"
>
<el-option
v-for="item in companyList"
:key="item.companyId"
:label="item.companyName"
:value="item"
>
<span v-html="showHighlight(item.companyName)">{{ item.companyName }}</span>
</el-option>
</el-select>
</el-form-item>
// 查询备选供应商列表 --最多50条
async queryPageByName() {
let params = {
companyName: this.companyName,
};
let res = await api.queryPageByName(params);
if (res.code == "200") {
this.companyLoading = false;
this.companyList = res.data.records;
}
},
// 关联企业名称查询
handleRemoteMethod(name) {
if (name !== "") {
this.companyLoading = true;
this.companyName = name;
this.queryPageByName();
} else {
this.companyList = [];
}
},
// 高亮显示
showHighlight(val){
return val.replace(
new RegExp(this.companyName, "g"),
`<span style='color: red'>${this.companyName}</span>`
);
},
