element UI實作輸入建議下拉清單 —— el-select filterable可篩選的下拉清單 or 帶輸入建議的輸入框 el-autocomplete ？

場景描述

 某班級共100個學生，現需錄入學生資訊，錄入學生姓名時，頁面上顯示學生姓名，但傳給後端的是學生的學号

常見誤區

完整範例

<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>