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-autocompletev-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-autocompletev-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 版本中，基本思路是一致的，只是语法有所不同。