<el-select v-model="value" placeholder="请选择" @change="handleChange">
<el-option
v-for="item in options"
:key="item.id"
:label="item.get_account_name"
:value="item.id">
</el-option>
</el-select>
//data数据
options: [],
value: null
//修改下拉选择方法
handleChange(value) {
this.testvalue(value)
},
发送请求成功后将选择框的绑定数据修改为第一项的id 就能展示相关数据
getSelectList() {
queryList.then(res => {
if (res.code==200) {
// 模拟发送请求后默认选择第一个数据
this.options=res.data
this.value = this.options[0].id
//展示数据的函数
this.testvalue(this.value)
}
})
再使用默认数据进行数据展示(因为我这使用的下拉数据一次性返回,前端展示不需要再次发送请求)
展示数据列表使用了这个 统一字段展示的列表 循环展示字段+数据
<div class="item" v-for="(it, i) in rechargeInfo" :key="i">
<span>{{ it.name || '--' }}{{ it.value }}</span>
</div>
testvalue(val){
const {
name,
account_name,
account,
bank_name,
address
} = this.options.find(item => item.id === val)
this.rechargeInfo = [
{
name: '字段一:',
value: name
},
{
name: '字段二:',
value: account_name
},
{
name: '字段三:',
value: account
},
{
name: '字段四:',
value: bank_name
},
{
name: '字段五:',
value: address
}
]
},