a-auto-complete表單自動(dòng)搜索返回列表中的關(guān)鍵字標(biāo)紅
通常在做關(guān)鍵字標(biāo)紅的場(chǎng)景，都是后端返回html結(jié)構(gòu)，前端直接渲染實(shí)現(xiàn)，但是如果需要前端處理的話，實(shí)現(xiàn)也是很簡(jiǎn)單的，接下來(lái)我直接上應(yīng)用場(chǎng)景吧
應(yīng)用場(chǎng)景就是通過(guò)關(guān)鍵字去調(diào)接口，返回的列表前端去關(guān)鍵字標(biāo)紅，接下來(lái)我們看代碼文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-683390.html
//這里是元素結(jié)構(gòu)代碼塊
<a-form-model-item
ref="acceptCustomerName"
label="啊實(shí)打?qū)嵣系?
prop="acceptCustomerName">
<a-auto-complete
v-model="modalForm.acceptCustomerName"
placeholder=""
option-label-prop="value"
:defaultActiveFirstOption="false"
:allowClear="true"
:disabled="disabled"
@select="onSelect"
@search="onSearch">
//這里的是搜索時(shí)候的表單插槽
<template slot="default">
<a-input v-model="modalForm.acceptCustomerName" :maxLength="100"></a-input>
</template>
//這里是返回結(jié)果后的列表項(xiàng)的插槽
<template slot="dataSource">
<a-select-option
v-for="item in dataSourceInput"
:key="item.customerId"
:value="item.companyName">
<a-row type="flex" justify="space-between" align="middle">
//這里用來(lái)渲染我們處理后的帶標(biāo)紅字段的dom
<a-col v-html="item.companyNames"></a-col>
</a-row>
</a-select-option>
</template>
</a-auto-complete>
</a-form-model-item>
接下來(lái)就是我們接口調(diào)用后的處理邏輯了文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-683390.html
onSearch(vText) {
const params = {
companyName: vText,
page: {
showCount: 30,
currentNum: 1,
},
};
getStandardCustomersLikeNameList(params).then(res => {
let list = res.data.results.data;
//接口拿到數(shù)據(jù)后，循環(huán)根據(jù)表單搜索的內(nèi)容去做一個(gè)替換
list.forEach(item => {
this.$set(
item,
'companyNames',
item.companyName.replace(vText, `<span style="color:red;">${vText}</span>`)
);
});
this.dataSourceInput = list;
});
},
到了這里，關(guān)于ant-vue1.78版a-auto-complete表單自動(dòng)搜索返回列表中的關(guān)鍵字標(biāo)紅的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
