el-autocomplete绑定对象数组

对于el-autocomplete，您可以绑定一个对象数组作为其选项。要实现这一点，您需要确保对象数组中的每个对象具有一个可以作为选项显示的属性。您可以使用el-autocomplete的label属性指定要显示的属性。

以下是示例代码，演示如何绑定对象数组到el-autocomplete:

<template>
  <div>
    <el-autocomplete
      v-model="selectedItem"
      :fetch-suggestions="querySearch"
      :placeholder="'请输入关键字'"
      :value-key="'name'"
      :popper-class="'my-autocomplete'"
    ></el-autocomplete>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      options: [
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' },
        { id: 3, name: 'Option 3' },
        // ...
      ],
    };
  },
  methods: {
    querySearch(queryString, cb) {
      // 根据输入的关键字搜索选项
      const results = queryString
        ? this.options.filter((option) =>
            option.name.toLowerCase().includes(queryString.toLowerCase())
          )
        : this.options;

      // 返回搜索结果
      cb(results);
    },
  },
};
</script>

在上述代码中，options数组包含了要显示的选项对象。el-autocomplete的v-model指令用于绑定选中的对象。fetch-suggestions属性用于指定一个方法，该方法在输入关键字时触发搜索操作。在querySearch方法中，我们根据输入的关键字搜索匹配的选项，并通过回调函数返回结果。value-key属性用于指定要显示的属性，这里我们使用name属性作为选项的显示内容。

您可以根据您的实际需求修改上述代码。希望对您有帮助！