要解决的问题:
编写测试脚本时,需要从后台获取接口返回值,并渲染到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);
}
}