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>