element-plus遇到的问题

最新推荐文章于 2024-11-10 15:10:09 发布

没有名字可以用

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量117

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67113879/article/details/141629699

版权

el-autocomplete外部更改输入建议

this.inputValue = '';
this.$refs.autocomplete.suggestions = this.suggestions;

<template>
  <div>
    <el-autocomplete
      ref="autocomplete"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
    <button @click="addSuggestion">添加输入建议</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: '',
      suggestions: [],
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var suggestions = this.suggestions;
      var results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
      // 调用 callback 来返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return suggestion => {
        return (suggestion.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log('选中的输入建议:', item);
    },
    addSuggestion() {
      const suggestion = { value: '新输入建议' };
      this.suggestions.push(suggestion);
      
      // 如果需要，可以清空输入并更新建议列表
      this.inputValue = '';
      this.$refs.autocomplete.suggestions = this.suggestions;
    }
  }
};
</script>