针对el-select绑定默认值问题

1.问题重现
创建了一个dialog 绑定了一个对象newDestination 要让其状态属性默认为正常

数据

dialogVisible: false,
newDestination:{ },
options:[
                {
                    label: "正常",
                    value: "1"
                },
                {
                    label: "禁用",
                    value: "2"
                }
            ]

打开dialog方法

//创建提单目的地按钮
        handleDiaNew(){
          this.newDestination.status = "1";  
          this.dialogVisible = true;
        }
<el-dialog
      title="创建提单目的地"
      :visible="dialogVisible"
      v-if="dialogVisible"
      @close="canceldialogVisible()"
      :close-on-click-modal="false"
      width="700px">
      <div style="margin-left:75px;width:500px;">
        <el-form :model="newDestination" ref="destinationForm" label-width="140px" style="width:400px;" class="demo-dynamic">
          <el-form-item prop="dname" label="提单目的地名称">
            <el-input v-model="newDestination.dname" placeholder="提单目的地名称"></el-input>
          </el-form-item>
          <el-form-item prop="status" label="提单目的地名状态">
            <el-select v-model="newDestination.status" style="width:260px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-row>
        <el-col :span="12" style="text-align:center">
          <el-button style="margin-left:100px;" @click="canceldialogVisible()">取消</el-button>
        </el-col>
        <el-col :span="12" style="text-align:center">
          <el-button type="primary" @click="submitForm()">提交</el-button>
        </el-col>
      </el-row>
    </el-dialog>

此时可以看到 el-select并未正常选中正常 而输入框显示的是1

正确做法
将data中newDestination:{ }, 首先初始化newDestination:{status:1 }这样 在渲染前就可以正常绑定默认值了

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容