vue 的elementui下拉选择问题？

  • Z时代
  • 2024-02-04
  • 分类：IT

vue 的elementui下拉选择问题，我想默人选择第一个，cityList是通过axios后台获取的，赋值了formData.cityId = 1来默人选择第一个城市，但是老是闪一下1才能出来默认值，改怎么操作下，主要下面表格也跟选择框有联动，如果给选择下拉框列表这加了settimeout下面table表格会请求不到cityid报错。
vue 的elementui下拉选择问题？

 <el-select
    v-model="formData.cityId"
    @change="cityChanged()"
    clearable="true"
    filterable
    placeholder="全部"
  >
    <el-option
      v-for="item in cityList"
      :key="item.cityId"
      :label="item.cityName"
      :value="item.cityId"
    >
    </el-option>
  </el-select>

回答：

获取cityList数据时加个loading状态，等获取完数据之后在显示formData.cityId的值

 <el-select
    v-model="loading ? '' : formData.cityId"
    @change="cityChanged()"
    clearable="true"
    filterable
    placeholder="全部"
  >
    ...
  </el-select>

回答：

可以把 init 里面的异步请求都用 Promise.all 或者 Promise.allSettled 包裹起来，然后再去做表单的初始化。
类似于这样

mounted(){
  this.init()
},
methods:{
  init(){
    this.loading = true
    Promise.all([
      this.loadDataA(), 
      this.loadListB(), 
      this.loadListC()
    ]).then(res=>{
     this.formData = { ....
   }.finally(()=>{
     this.loading = false
   }
  },
  loadDataA(){ 
    return new Promise((resolve,reject)=>{
      fetch(url, params).then(res=>{
        ....
        resolve(res)
      }.catch(err=>{ 
        ...
        reject(err)
      }
    })
  },
  loadListB(){ return new Promise(... },
  loadListC(){ return new Promise(... }
}

也可以在数据还没有返回过来的时候就添加一个 loading 效果或者制作骨架屏。

以上是 vue 的elementui下拉选择问题？ 的全部内容， 来源链接： utcz.com/p/933186.html

回到顶部