在vue+element-ui中，select选项值动态从后台获取，同时将选中值的id传给后台的方法

问题：

    选项动态从后台获取，同时要实时获取到用户选中值的id
    如select框有红，黄，蓝三个值，id分别为1，2，3
    用户点击红，我要获取到红的id为1
    用户点击黄，我要获取到黄的id为2
    用户点击蓝，我要获取到蓝的id为3

首先问题步骤分为三步：

1. 点击select框，发送请求到后台取到值data，动态渲染到页面
2. 点击要选中的值，将选中的值拿去和进行遍历
3. 获取选中值的id，赋值给定义好的某个变量

准备工作：

    创建全局变量data，用于存放后台返回数据
    创建全局变量id，用于存放获取的id值

    给el-select设置如下属性：
    v-model="data.name"                // 用于双向绑定
    @focus="function1"                 // 点击select框时被触发的方法
    @change="function2(data.name)"     // 点击要选中的值时被触发的方法

    给el-option设置以下属性：
    v-for="item in data"   // 遍历获取到的select列表data
    :key="item.id"         // 使用v-for要加key，避免遍历出错
    :value="item.name"       // option实际值
    :label="item.name"     // option显示值

添加方法：

	// 点击了select框
    function1() {
      // 发请求获取渠道下拉框的值
      let res = this.axios.get("url地址");
      if (res.code === 200) {
         this.data = res.data;  // 把获取到的数据赋给this.data
      }
    },

// 点击了option某一项的值
function2(val) {
// 遍历渠道列表，根据name寻找id
this.data.map((s, index) => {
if (s.name === val) {
this.id = this.data[index].id;
// 打印id，可以看到已经获取到当前选中值的id
console.log(this.id)
}
});

这种是遍历的方法，看起来有点麻烦。并且name的值不能重复，重复的话只会选择到第一个name匹配的id。所以一般常用的更简单的是：

把option的value值与id绑定，lebal与值绑定，这样用户看到的是lebal绑定的值，实际选中的直接就是id。 因为value表示的是option实际值，label表示option的显示值。

即：
给el-option设置以下属性：

v-for="item in data"
:key="item.id"
:value="item.id"
:label="item.name"

value绑定的是 item.id，然后select选框选中的直接就是需要的id了

function2(val) {
        console.log(val)  // 此时打印的直接就是id
    }