elementUI/element-plus el-autocomplete多属性对象数组el-autocomplete-suggestion选中不回显文本框的解决办法。

在Element UI或Element Plus中，el-autocomplete组件用于输入时显示建议列表。如果您想要使用多属性对象数组作为建议，并且想要自定义建议的显示，您可以使用el-autocomplete-suggestion组件。

以下是一个简单的例子，展示如何使用el-autocomplete组件和自定义的建议列表：

<template>
  <el-autocomplete
    v-model="state.searchText"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @select="handleSelect"
  >
    <template #default="{ item }">
      <div class="custom-suggestion">
        <span>{{ item.value }}</span>
        <span>{{ item.desc }}</span>
      </div>
    </template>
  </el-autocomplete>
</template>
 
<script>
import { reactive, toRefs } from 'vue';
export default {
  setup() {
    const state = reactive({
      searchText: '',
      suggestions: [],
    });
 
    const querySearch = (queryString, cb) => {
      // 模拟从服务器获取数据
      state.suggestions = [
        { value: 'Link 1', desc: 'Description 1' },
        { value: 'Link 2', desc: 'Description 2' },
        // 更多建议对象...
      ];
 
      cb(state.suggestions);
    };
 
    const handleSelect = (item) => {
      // 处理选中的建议
      console.log('Selected:', item);
    };
 
    return { ...toRefs(state), querySearch, handleSelect };
  },
};
</script>
 
<style>
.custom-suggestion {
  display: flex;
  justify-content: space-between;
}
</style>

在这个例子中，我们定义了一个响应式状态state，其中包含输入的文本searchText和建议列表suggestions。querySearch方法模拟从服务器获取建议数据，并通过回调函数传递给el-autocomplete组件。

在el-autocomplete组件中，我们使用#default插槽自定义建议的显示。每个建议都是一个对象，包含value和desc属性，分别用于显示建议的标题和描述。

当用户选择建议时，handleSelect方法会被调用，并处理选中的建议。