element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ？

场景描述

 某班级共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>