vueElement-ui の入力検索および変更メソッドについて

この記事は参考用であり、アイデアを提供するものです。

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 &#39;vue&#39;
Vue.component(&#39;my-remote&#39;, {
  functional: true,
  render: function(h, ctx) {
    var item = ctx.props.item;
    let str = h(&#39;li&#39;, ctx.data, [
      h(&#39;p&#39;, { attrs: { class: &#39;name&#39; } }, [item.value]),
      h(&#39;span&#39;, { attrs: { class: &#39;addr&#39; } }, [item.address])
    ]);
    if (item.str) { // 根据参数不同 修改原模版结构
      str = h(&#39;center&#39;, { attrs: { class: &#39;ems&#39; } }, [item.str])
    }
    return str
  },
  props: {
    item: { type: Object, required: true }
  }
});

export default {
  data() {
    return {
      restaurants: [],
      state: &#39;&#39;,
      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(&#39;/inner&#39;, { 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 = &#39;&#39;;
          if (typeof a === "object") {
            b = a[1];
            a = a[0];
          }
          serier.push({ "value": a, "address": b })
        }
      } else { // 如果没有请求到数据，则显示暂无数据！
        serier.push({ "str": &#39;暂无数据&#39; })
      }
      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 の入力検索および変更メソッドについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。