Vue+elementPlus实现给select选项值动态从后台获取，同时将选中值的ID通过查询按钮传给后台

要解决的问题：

编写测试脚本时，需要从后台获取接口返回值，并渲染到select列表中，然后将选中列表值的id通过点击查询按钮传给后端接口

准备工作：

//创建全局变量data，用于存放后台返回数据和选中数据的双向绑定
data() {
    return {
      selectedOption: '',
      dataList:'',
    }
}

//el-select属性设置
v-model="selectedOption"   //双向绑定,v-model的值为当前被选中的 el-option 的 value 属性值
@focus="select"            //点击select被触发的方法

//el-option属性设置
v-for="item in dataList"   
:key="item.id"
:value="item.id"           //option的实际值
:label="item.tenant_name"  //option的显示值

//el-button按钮的属性设置
@click="submitForm"        //点击按钮时触发的方法


//el-select和el-button代码
<el-select
   v-model="selectedOption"
   clearable
   placeholder="请选择租户"
   class="filter-item"
   style="width: 140px"
   @focus="select">
   <el-option
      v-for="item in dataList"
      :key="item.id"
      :value="item.id"
      :label="item.tenant_name"/>
 </el-select>
 <el-button  type="primary" @click="submitForm">查询</el-button>

添加方法：

import axios from 'axios' //在页面的script中导入axios

//点击select时调用的方法
select(){
  // 发请求获取渠道下拉框的值
  axios.get('url地址').then(res =>{
  this.dataList = res.data //将返回的data值赋值给dataList
  }).catch(err => {
   console.log(err)
  });
}


//点击查询按钮时调用的方法
async submitForm() {
   try{
       const response = await fetch(`url地址?需要传入的参数名称=${this.selectedOption}`);  //用${this.selectedOption}可以获取select中选中值的ID
       const data = await response.json(); //将返回值赋值给data，进行后续处理；如果返回值不需要处理可以直接用，也可以在data()中创建一个全局变量，使用this.变量名的方式
   }catch (error) {
       console.error(error);
   }
}