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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
JavaScript实现拖拽效果
Mar 16 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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实现禁用IE和火狐的缓存问题
2012/12/03 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
Smarty3配置及入门语法
2017/02/22 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
python基于ID3思想的决策树
2018/01/03 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
对python周期性定时器的示例详解
2019/02/19 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
python中p-value的实现方式
2019/12/16 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
华为C++笔试题
2014/08/05 面试题
爱护公物标语
2014/06/24 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2015元旦标语横幅
2014/12/09 职场文书
趣味运动会广播稿
2015/08/19 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫