场景描述
某班级共100个学生,现需录入学生信息,录入学生姓名时,页面上显示学生姓名,但传给后端的是学生的学号
常见误区
很多人第一反应是使用带输入建议的输入框 el-autocomplete 实现,但el-autocomplete的绑定值和显示值无法分离。
所以,此种显示和绑定值分离的情况,应使用可筛选的下拉列表实现,即带filterable属性的el-select
完整范例
<template> <div style="padding: 20px"> <el-select v-model="data" filterable default-first-option placeholder="请选择"> <el-option v-for="item in suggestList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </template> <script> export default { mounted(){ for (let i = 1; i <= 100 ; i++) { this.suggestList.push( { value:i, label:i+'的姓名' } ) } }, data() { return { data: '', suggestList: [] } }, } </script> <style scoped> </style>