Vue+elementUi给select选项值动态从后台获取，同时将选中值的id传给后台

给出的问题：

选项动态从后台获取，同时要实时获取到用户选中值的id

select框有红，黄，蓝三个值，id分别为1，2，3
用户点击红，获取到红的id为1
用户点击黄，获取到黄的id为2
用户点击蓝，获取到蓝的id为3

问题步骤分为三步：

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

准备工作：

创建全局变量data，用于存放后台返回数据
data() {
    return {
        dataList: {}
    }
},


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


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

添加方法：

方法一：没有token验证是可以直接使用axios方法

import axios from 'axios' // 在显示页面导入axios

// 点击了select框
function1() {
    // 发请求获取渠道下拉框的值【没有token验证是可以直接使用axios方法】
    const res = axios.get('url地址');
    if (res.code === 200) {
        this.data = res.data;  // 把获取到的数据赋给this.data
    }
}

方法二：有token验证要调用方法

// 在xxx.js文件里面写的查询方法
export function query() {
  return request({
    url: 'url地址',
    method: 'GET'
  })
}

import { query } from '@/api/xxx' // 在显示页面导入在xxx.js文件里面写query方法

// 点击了select框
function1() {
    // 发请求获取渠道下拉框的值
    query().then(res => { // 调用导入的query方法进行查询
        if (res.code === 200) {
            this.data = res.data // 把获取到的数据赋给this.data
        }
    }).catch(err => {
        console.log(err)
    })
}

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

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

完整的代码：

index.vue

index.js

import request from '@/utils/request'


export function query() {
  return request({
    url: 'url地址',
    method: 'GET'
  })
}