美文网首页
针对el-select绑定默认值问题

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

作者: 一叶知秋_038b | 来源:发表于2019-07-12 16:06 被阅读0次

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

相关文章

网友评论

      本文标题:针对el-select绑定默认值问题

      本文链接:https://www.haomeiwen.com/subject/rovrkctx.html