element-ui的select失效

8434393-87accc10036aa360_看图王.png

点击下拉框选择,选定后的值不回显(机构选择)

<el-form-item label="所属机构" prop="orgId">
          <el-select clearable v-model="query.orgId"placeholder="请选择" style='width:240px'>
            <el-option
              v-for="item in orgNames"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select> {{query.orgId}}= {{typeof query.orgId}}={{orgNames}}
        </el-form-item>

在select上加上唯一性的 value-key="id" ,也不起作用
机构列表orgNames 是由后台接口获取整理

[{
    "id": "123123123",
    "name": "123123213"
}]

query的内容

{

    "statusCd": "Y"
}

query得到的方式(后台详情接口获得整理)

this.query = res.data// 包含内容在上方

展示效果如第一张图,机构的下拉选择不回显

解决方式:

this.query.orgId = res.data.orgId

想法

let data=  res.data
this.query = data// 包含内容在上方
//初始化this.query时，orgId 值为null,会造成query没有orgId 属性

        // this.query = data
          //this.query.orgId = data.orgId
          for (const key in data) {
            this.query[key] = data[key]
          }
          

参考链接
http://crabdave.iteye.com/blog/2360018