el-form的resetFields如何对checkbox生效

在使用 element UI 作为前端UI控件库。

遇到一个问题:el-form的resetFields对checkbox不生效

网上的方法:

官网上说:resetFields 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果;
后来发现,是每个el-form-item属性中没有加 prop=”xxx”,添加上就可以重置了;

然而添加了prop属性还是不起作用。于是在官网的示例中进行试验。

解决方案是:propv-model要是同一个名字

// template
  <el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>

// script
data () {
  return {
    ruleForm: {
      type: []
    }
  }
}

上述例子就是 propv-model 均使用了 名字'type'

对于不使用 checkbox-group 也是可行:

// template
  <el-form-item label="活动性质" prop="type">
      <el-checkbox label="美食/餐厅线上活动" v-model="ruleForm.type[0]"></el-checkbox>
      <el-checkbox label="地推活动" v-model="ruleForm.type[1]"></el-checkbox>
      <el-checkbox label="线下主题活动" v-model="ruleForm.type[2]"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" v-model="ruleForm.type[3]"></el-checkbox>
  </el-form-item>

// script
data () {
  return {
    ruleForm: {
      type: []
    }
  }
}

你可能感兴趣的:(前端)