value-key 的作用

在 el-autocomplete 组件中，value-key 是一个非常重要的属性，它用于指定选项对象中作为值的字段名。当选项列表是一个包含多个属性的对象数组时，value-key 能帮助组件明确哪个属性是实际要使用的值。比如，选项列表为 [{id: '01', name: 'ab'}, {id: '02', name: 'cd'}]，若设置 value-key="id"，就表明组件会以 id 字段的值来进行匹配和绑定。

实现初始值匹配显示

若 v-model 绑定的值是 id，要让 el-autocomplete 里的值自动初始加载为对应的 name，可以通过以下步骤实现：

Vue 3 + ElementPlus

<template>
  <div>
    <el-autocomplete
      v-model="selectedId"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
      :value-key="valueKey"
      :item-text="item => item.name"
    ></el-autocomplete>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElAutocomplete } from 'element-plus';

// 选项列表
const options = [
  { id: '01', name: 'ab' },
  { id: '02', name: 'cd' }
];

// 绑定的初始值
const selectedId = ref('01');
// 指定作为值的字段名
const valueKey = ref('id');

const querySearch = (queryString, cb) => {
  const results = queryString
    ? options.filter(item => item.name.toLowerCase().includes(queryString.toLowerCase()))
    : options;
  cb(results);
};

const handleSelect = (item) => {
  console.log('选中的值:', item);
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

代码解释

• value-key 属性：设置为 id，这样组件就知道使用 id 字段的值进行匹配和绑定。
• item-text 属性：通过 :item-text="item => item.name" 指定在输入框中显示的文本为选项对象的 name 属性值。
• v-model 绑定：v-model 绑定的是 selectedId，初始值为 '01'。组件会根据 value-key 找到对应的选项，并通过 item-text 显示该选项的 name 属性值。

Vue 2 + Element UI 示例

<template>
  <div>
    <el-autocomplete
      v-model="selectedId"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
      :value-key="valueKey"
      :item-text="item => item.name"
    ></el-autocomplete>
  </div>
</template>

<script>
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

export default {
  data() {
    return {
      selectedId: '01',
      valueKey: 'id',
      options: [
        { id: '01', name: 'ab' },
        { id: '02', name: 'cd' }
      ]
    };
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.options.filter(item => item.name.toLowerCase().includes(queryString.toLowerCase()))
        : this.options;
      cb(results);
    },
    handleSelect(item) {
      console.log('选中的值:', item);
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

总结

通过设置 value-key 和 item-text 属性，能让 el-autocomplete 组件在 v-model 绑定 id 的情况下，自动显示对应的 name 值。在不同的 Vue 版本中，基本思路是一致的，只是语法有所不同。