中国南昌企业网站制作,网站友情链接,wordpress手机滑动导航菜单,网站制作价格服务a-auto-complete表单自动搜索返回列表中的关键字标红
通常在做关键字标红的场景#xff0c;都是后端返回html结构#xff0c;前端直接渲染实现#xff0c;但是如果需要前端处理的话#xff0c;实现也是很简单的#xff0c;接下来我直接上应用场景吧 应用场景就是通过关键…a-auto-complete表单自动搜索返回列表中的关键字标红
通常在做关键字标红的场景都是后端返回html结构前端直接渲染实现但是如果需要前端处理的话实现也是很简单的接下来我直接上应用场景吧 应用场景就是通过关键字去调接口返回的列表前端去关键字标红接下来我们看代码
//这里是元素结构代码块
a-form-model-itemrefacceptCustomerNamelabel啊实打实上的propacceptCustomerNamea-auto-completev-modelmodalForm.acceptCustomerNameplaceholderoption-label-propvalue:defaultActiveFirstOptionfalse:allowCleartrue:disableddisabledselectonSelectsearchonSearch//这里的是搜索时候的表单插槽template slotdefaulta-input v-modelmodalForm.acceptCustomerName :maxLength100/a-input/template//这里是返回结果后的列表项的插槽template slotdataSourcea-select-optionv-foritem in dataSourceInput:keyitem.customerId:valueitem.companyNamea-row typeflex justifyspace-between alignmiddle//这里用来渲染我们处理后的带标红字段的doma-col v-htmlitem.companyNames/a-col/a-row/a-select-option/template/a-auto-complete/a-form-model-item接下来就是我们接口调用后的处理逻辑了
onSearch(vText) {const params {companyName: vText,page: {showCount: 30,currentNum: 1,},};getStandardCustomersLikeNameList(params).then(res {let list res.data.results.data;//接口拿到数据后循环根据表单搜索的内容去做一个替换list.forEach(item {this.$set(item,companyNames,item.companyName.replace(vText, span stylecolor:red;${vText}/span));});this.dataSourceInput list;});},
