美文网首页
Element select选择器绑定对象

Element select选择器绑定对象

作者: 3e2235c61b99 | 来源:发表于2020-08-19 15:44 被阅读0次

    VUE项目中,Element select选择器之前都是绑定的字符串,像这样的

    <!-- html -->
    <el-select v-model="ruleForm.region" clearable placeholder="请选择">
      <el-option v-for="item in options" :key="item.code" :label="item.value" :value="item.code"></el-option>
    </el-select>
    
    //js
    data(){
      return{
        options: dataRang1,
        ruleForm: {
          region: {
            code: "",
            value: ""
          }
          //或 region: {}
        }
      }
    },
    

    这样的话,this.ruleForm.region取到的值是字符串,而不是对象
    由于一些问题,现在需要把绑定值改成对象,不要字符串,代码如下

    <el-select v-model="ruleForm.region" @change="selectChange" value-key="code" clearable placeholder="请选择">
      <el-option v-for="item in options" :key="item.code" :label="item.value" :value="item"></el-option>
    </el-select>
    

    但是这样的话有个问题,由于这个下拉选择是在表单(表单项校验非空)中的,如果下拉选择框没有变化过,直接提交时校验非空不会生效
    把上面的js代码部分修改为:

    data(){
      return{
        options: dataRang1,
        ruleForm: {
          region: null
        }
      }
    },
    

    这样写,直接提交时校验非空会生效.
    但是如果在页面加载时,需要给this.ruleForm.region.code赋值,需要这样写

    this.ruleForm.region = { code: "00003" }
    

    相关文章

      网友评论

          本文标题:Element select选择器绑定对象

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