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+ajax 购物车框架(入门篇)
Oct 29 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery中库的引用方法
Jan 06 jQuery
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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中for循环语句的几种变型
2007/03/16 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
如何卸载python插件
2020/07/08 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
应届毕业生的自我评价
2019/06/21 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python