Vue - Element el-form 表单对象多层嵌套校验

针对el-form的数据源是对象嵌套对象,在进行数据绑定和校验时和单层的对象有一点区别,

具体是下面两部分:

数据源:

js 复制代码
fromData: {
  name: '',
  health: {
    height: ''
  }
}

1、 给 el-form-itemprop设为:prop="health.height"
v-model 设为:v-model="fromData.health.height"

c 复制代码
  <el-form-item label="身高" prop="health.height">
    <el-input v-model="fromData.health.height" clearable />
  </el-form-item>

2、校验规则rules对象对应的key设置为数据源内部的值: 'health.height'

c 复制代码
rules: {
	'health.height': [{ required: true, message: '请输入身高', trigger: 'blur' }]
}

具体代码

html 复制代码
<template>
  <div>
    <el-form ref="fromRef" :model="fromData" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="fromData.name" clearable />
      </el-form-item>
      <el-form-item label="身高" prop="health.height">
        <el-input v-model="fromData.health.height" clearable />
      </el-form-item>
    </el-form>
    <el-button @click="onSubmit()">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fromData: {
        name: '',
        health: {
          height: ''
        }
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        'health.height': [{ required: true, message: '请输入身高', trigger: 'blur' }]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs['fromRef'].validate((valid) => {
        if (valid) {
          console.log('校验通过')
          console.log('fromData', JSON.stringify(this.fromData))
        }
      })
    }
  }
}
</script>

<style scoped></style>
相关推荐
new出一个对象1 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥2 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
天天进步20155 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html