1、为什么要获取 Select(选择器) 选中的 label 的 id 和 name 等属性：
从后台传过来的数据，想让它显示在 Select 选择器的栏中，并想动态获取所选中的 label 值的 id 与 name 等属性值，以备后用；
2、通过循环将数据显示出来：
// 此时的显示效果为：将 List 中的数据都展示在 Select(选择器) 的下拉框中；
<template>
// 此时的 v-model 的含义：绑定后台获取数据的第一个 id 值；
// 目的：使得选择器中填入的是从接口处获得的第一条数据；
<el-select class="top-select" v-model="formData.operator_id" size="mini" >
<el-option
v-for="(item,id) in List" :key="id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</template>
<script>
// 导入数据接口；
import {List} from "@/api/list";
export default {
data() {
return {
formData:{
operator_id: 126;
// 此时默认设置的是：List 中获去取的第一个数据的 id 值；
},
// 此时的 List 是指：从后台获得的数据数组；
List: [],
}
},
created(){
//获得数据接口的数据，并用 List 数组来保存该数据；
List().then(res => {
this.List = res.data;
});
},
methods: {
},
}
</script>
<style lang="scss" scoped>
</style>
3、添加单击 lable 触发事件，动态获取 id、name 等属性值：
// 此时就能在后台获得单击下拉框选项的 id 及 name 等属性值；
<template>
<el-select class="top-select" v-model="formData.operator_id" size="mini" >
<el-option
v-for="(item,id) in List" :key="id"
:label="item.name"
:value="item.id"
@click.native="handleChange(item)"
// 此时表示单击下拉框中数据，就能将单击数据的相关的 id name 等值获得；
>
</el-option>
</el-select>
</template>
<script>
import {List} from "@/api/list";
export default {
data() {
return {
formData:{
operator_id: 126
},
List: [],
}
},
created(){
List().then(res => {
this.List = res.data;
});
},
methods: {
handleChange(val){
// 此时用 val 来作为形参来接受 handleChange(item) 方法传来的 item 值；
// 然后在后台就可以拿到点击下拉框中数据的 id 与 name 等属性值；
console.log(val.id);
console.log(val.name);
}
},
}
</script>
<style lang="scss" scoped>
</style>
4、小结：
其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
