问题场景描述

页面列表点击某行数据查看详情
此时需要调用一个获取详情数据的接口,接口用时1000ms,
请求完成后对下拉框进行数据回填,
数据已经更新了,但是页面中没有进行回显
在这里插入图片描述

解决方法

在初始化data的时候,对下拉框绑定的字段进行默认值设置

  data(){
    return {
      formData: {
        value: ''//设置默认值
      },
      options: [{
        value: '选项1', label: '黄金糕'
      }, {
        value: '选项2', label: '双皮奶'
      }]
    }
  },

完整代码

本示例中用setTimeout代替接口请求代码,同接口一样有延迟效果

<template>
  <el-select v-model="formData.value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
<script>
export default {
  data(){
    return {
      formData: {
        value: ''
      },
      options: [{
        value: '选项1', label: '黄金糕'
      }, {
        value: '选项2', label: '双皮奶'
      }]
    }
  },
  created(){
    setTimeout(()=>{
      this.formData.value = '选项2'
      console.log('下拉框选中值', this.formData.value)
    }, 1000)
  }
}
</script>
Logo

前往低代码交流专区

更多推荐