Vue Element-UI el-select获取选中的label的值

这可能是一个比较常见到的问题，做个小笔记
图例

这是我案例中的数据结构以及字段，根据自己实际情况确定绑定的值

代码部分

<template>
 <span class="ml32">班级</span>
        <el-select v-model="classNames" placeholder="请选择班级" style="width: 150px;" id="classnames" @change="changes01">
          <el-option no-match-text v-for="(item1,index1) in classnamelist" :value="item1.classId" :label="item1.className"></el-option>
        </el-select>
</template>
<script>
data(){
      classNames:'', //班级名称
      classnamelist:[], //存放班级名称的数组
      
}，
methods：{
     //监听班级值变化
    changes01(vals){
         this.classNam = vals ? this.classnamelist.find(ele => ele.classId === vals ).className : ''
         console.log('班级名称',this.classNam,'班级ID',vals)
         this.classId=vals
    },
}
</script>