ElementUI组件模板之自动完成el-autocomplete

版本号

"vue": "2.6.10"
"element-ui": "2.13.0"

代码如下

<template>
  <el-autocomplete v-model="keywords"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入内容"
    :trigger-on-focus="false"
    @select="handleSelect">
    <template v-slot="{ item }">
      <span>{{item.name}}</span>
    </template>
  </el-autocomplete>

</template>

<script>
export default {
  data() {
    return {
      keywords: "",
      list: [
        {
          name: "张三"
        },
        {
          name: "李四"
        }
      ]
    };
  },

  methods: {
    querySearchAsync(queryString, cb) {
      let result = this.list.filter(item => {
        if (item.name.indexOf(queryString) > -1) {
          return true;
        }
      });

      cb(result);
    },

    handleSelect(item) {
      console.log(item);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

参考
https://element.eleme.cn/#/zh-CN/component/input#zi-ding-yi-mo-ban