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的显示值，用户看到的值

<el-select
  v-model="dataList.name"
  clearable
  placeholder="物品类别"
  class="filter-item"
  style="width: 140px"
  @focus="function1"
  @change="function2(dataList.name)">
  <el-option
    v-for="item in dataList"
    :key="item.id"
    :value="item.id"
    :label="item.name"/>
</el-select>

添加方法：

方法一：没有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

<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--select下拉框动态显示数据-->
      <el-select
        v-model="dataList.name"
        clearable
        placeholder="物品类别"
        class="filter-item"
        style="width: 140px"
        @focus="function1"
        @change="function2(dataList.name)">
        <el-option
          v-for="item in dataList"
          :key="item.id"
          :value="item.id"
          :label="item.name"/>
      </el-select>
    </div>
  </div>
</template>

<script>
import { query } from '@/api/article'

export default {
  data() {
    return {
      dataList: {}
    }
  },
  methods: {
    // 点击了select框
    function1() {
      // 发请求获取渠道下拉框的值
      query().then(res => {
        if (res.code === 200) {
          this.dataList = res.data // 把获取到的数据赋给this.dataList
        }
      }).catch(err => {
        console.log(err)
      })
    },
    function2(val) {
      alert(val) // 此时打印的直接就是id
    }
  }
}
</script>

<style scoped>
</style>

index.js

import request from '@/utils/request'


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