关于vueElement-uiinput搜索与修改的方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了关于vueElement-uiinput搜索与修改的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2393字，纯文字阅读大概需要4分钟。

内容图文

本文仅供参考，提供思路！

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('p', { 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) >= 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>　

大致方法就是这样，可以根据自己需要再改动！

以上就是关于vueElement-ui input 搜索与修改的方法的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的关于vueElement-uiinput搜索与修改的方法全部内容，希望文章能够帮你解决关于vueElement-uiinput搜索与修改的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---