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 相关文章推荐
JavaScript获得选中文本内容的方法
Dec 02 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
JS实现简单的九宫格抽奖
Jun 28 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购物网站支付paypal使用方法
2010/11/28 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
Three.js学习之网格
2016/08/10 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
vue debug 二种方法
2018/09/16 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
python实现中文输出的两种方法
2015/05/09 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
JAVA代码查错题
2014/10/10 面试题
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
新年联欢会主持词
2014/03/27 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
环卫工作个人总结
2015/03/04 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
初三英语教学反思
2016/02/15 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python