vue Element-ui输入远程搜索与修改建议显示模版的示例代码 - 行业资讯

<强> html:

　　　　　　& lt; template> 　　& lt; el-autocomplete popper-class=" my-autocomplete " custom-item=v模型“遥远的我”=白刺?fetch-suggestions=皅uerySearch”占位符=澳峡铡蓖急?肮乇铡?on-icon-click=癶andleIconClick”比; 　　& lt;/el-autocomplete> 　　& lt;/template> 　　　　

<强> js:

　　　　　　& lt; script> 　　从“Vue”进口Vue 　　Vue.component(遥远的我,{ 　　功能:没错, 　　呈现:函数(h, ctx) { 　　var项=ctx.props.item; 　　让str=h (ctx,“李”。数据, 　　h (" div " {attrs:{类:“名字”}},[item.value]), 　　h(“跨越”,{attrs:{类:“addr”}}, [item.address]) 　　]); 　　如果(item.str){//根据参数不同修改原模版结构　　str=h(“中心”,{attrs:{类:ems的}},[item.str]) 　　} 　　返回str 　　}，　　道具:{ 　　项目:{类型:对象,要求:真} 　　} 　　}); 　　出口默认{ 　　数据(){ 　　返回{ 　　餐厅:[], 　　状态:”, 　　超时:空, 　　_that:{}//记录,用来发起http请求　　}; 　　}，　　方法:{ 　　querySearch(属性、cb) { 　　让餐厅=this.restaurants; 　　如果餐馆。长度比;0){//如果参数都没变化,则使用缓存数据,避免请求沉积　　让结果=参数& # 63;restaurants.filter (this.createFilter(变量):餐厅; 　　cb(结果); 　　其他}{ 　　const qtype='参数”; 　　this._that。美元的http(/内部,{qtype: qtype}) 　　不要犹豫((res)=比;{ 　　餐馆=this.loadAll (res); 　　这一点。餐馆=餐厅; 　　让结果=参数& # 63;restaurants.filter (this.createFilter(变量):餐厅; 　　cb(结果); 　　}) 　　.catch ((err)=比;{ 　　餐馆=this.loadAll (); 　　让结果=参数& # 63;restaurants.filter (this.createFilter(变量):餐厅; 　　cb(结果); 　　}); 　　} 　　}，　　createFilter(变量){ 　　返回(餐厅)=比;{ 　　如果(restaurant.str)返回false; 　　返回(restaurant.value.indexOf (queryString.toLowerCase ())===0); 　　}; 　　}，　　负荷(数据){ 　　让中国国情=[]; 　　如果(数据){ 　　(让我=0,l=data.length;我& lt;l;我+ +){ 　　让一个=数据(我); 　　让b="; 　　如果(typeof===岸韵蟆?{ 　　b=[1];=[0]; 　　} 　　中国国情。推动({“价值”:“地址”:b}) 　　} 　　其他}{//如果没有请求到数据,则显示暂无数据! 　　中国国情。推动({“str”:“暂无数据的}) 　　} 　　返回中国国情; 　　}，　　handleIconClick (ev) { 　　这一点。状态=" "; 　　} 　　}，　　安装(){ 　　这一点。_that=; 　　} 　　} 　　& lt;/script>之前　　　　css:

　　　　　　& lt;风格lang=皊css”比; 　　.my-autocomplete { 　　李{ 　　行高:正常!重要; 　　填充:7 px !重要; 　　　　. name { 　　文本溢出:省略; 　　溢出:隐藏; 　　} 　　.addr { 　　字体大小:12 px; 　　颜色:# b4b4b4; 　　} 　　　　.highlighted .addr { 　　颜色:# ddd; 　　} 　　} 　　.ems { 　　字体大小:12 px; 　　颜色:# b4b4b4; 　　} 　　} 　　& lt;/style>之前　　　　

以上所述是小编给大家介绍的vue Element-ui输入远程搜索与修改建议显示模版的示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!