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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
详解webpack 最简打包结果分析
Feb 20 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 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去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
浅析matlab中imadjust函数
2020/02/27 Python
python能否java成为主流语言吗
2020/06/22 Python
python selenium xpath定位操作
2020/09/01 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
导游词之河北邯郸
2019/09/12 职场文书
python基础详解之if循环语句
2021/04/24 Python
html实现弹窗的实例
2021/06/09 HTML / CSS
MongoDB使用场景总结
2022/02/24 MongoDB