vue Element-ui input 远程搜索与修改建议显示模版的示例代码


Posted in Javascript onOctober 19, 2017

html:

<template>
 <el-autocomplete popper-class="my-autocomplete" custom-item="my-remote" v-model="state" :fetch-suggestions="querySearch" placeholder="默认空" icon="close" :on-icon-click="handleIconClick">
 </el-autocomplete>
</template>

js:

<script>
import Vue from 'vue'
Vue.component('my-remote', {
 functional: true,
 render: function(h, ctx) {
  var item = ctx.props.item;
  let str = h('li', ctx.data, [
   h('div', { attrs: { class: 'name' } }, [item.value]),
   h('span', { attrs: { class: 'addr' } }, [item.address])
  ]);
  if (item.str) { // 根据参数不同 修改原模版结构
   str = h('center', { attrs: { class: 'ems' } }, [item.str])
  }
  return str
 },
 props: {
  item: { type: Object, required: true }
 }
});
export default {
 data() {
  return {
   restaurants: [],
   state: '',
   timeout: null,
   _that: {} // 记录this,用来发起http请求
  };
 },
 methods: {
  querySearch(queryString, cb) {
   let restaurants = this.restaurants;
   if (restaurants.length > 0) { // 如果参数都没变化,则使用缓存数据,避免请求沉积
    let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
    cb(results);
   } else {
    const qtype = ‘参数';
    this._that.$http('/inner', { qtype: qtype })
     .then((res) => {
       restaurants = this.loadAll(res);
       this.restaurants = restaurants;
       let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
       cb(results);
     })
     .catch((err) => {
      restaurants = this.loadAll();
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      cb(results);
     });
   }
  },
  createFilter(queryString) {
   return (restaurant) => {
    if (restaurant.str) return false;
    return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
   };
  },
  loadAll(data) {
   let serier = [];
   if (data) {
    for (let i = 0, l = data.length; i < l; i++) {
     let a = data[i];
     let b = '';
     if (typeof a === "object") {
      b = a[1];
      a = a[0];
     }
     serier.push({ "value": a, "address": b })
    }
   } else { // 如果没有请求到数据,则显示暂无数据!
    serier.push({ "str": '暂无数据' })
   }
   return serier;
  },
  handleIconClick(ev) {
   this.state = "";
  }
 },
 mounted() {
  this._that = this;
 }
}
</script> 

css:

<style lang="scss">
.my-autocomplete {
 li {
  line-height: normal !important;
  padding: 7px !important;
 
  .name {
   text-overflow: ellipsis;
   overflow: hidden;
  }
  .addr {
   font-size: 12px;
   color: #b4b4b4;
  }
 
  .highlighted .addr {
   color: #ddd;
  }
 }
 .ems {
  font-size: 12px;
  color: #b4b4b4;
 }
}
</style> 

总结

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

Javascript 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
分享别人写的一个小型js框架
Aug 13 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
JavaScript适配器模式详解
Oct 19 #Javascript
JavaScript门面模式详解
Oct 19 #Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 #Javascript
AngularJS的$location使用方法详解
Oct 19 #Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 #Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 #Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
You might like
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
如何判断php数组的维度
2013/06/10 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
python函数形参用法实例分析
2015/08/04 Python
浅析Python编写函数装饰器
2016/03/18 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Python统计单词出现的次数
2018/04/04 Python
简单了解python单例模式的几种写法
2019/07/01 Python
在python中画正态分布图像的实例
2019/07/08 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python中Lambda表达式详解
2019/11/20 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
华为python面试题
2016/05/03 面试题
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
2014年建筑工作总结
2014/11/26 职场文书
离婚案件被告代理词
2015/05/23 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript