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 }这样 在渲染前就可以正常绑定默认值了