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

最新推荐文章于 2025-05-14 16:46:50 发布

西半球

最新推荐文章于 2025-05-14 16:46:50 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/iotjin/article/details/132081051

Vue 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了在Vue的ElementUI组件El-Form中，如何处理对象嵌套的对象作为数据源，以及如何正确设置prop和v-model进行数据绑定，并配置校验规则进行输入验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

针对el-form的数据源是对象嵌套对象，在进行数据绑定和校验时和单层的对象有一点区别，
具体是下面两部分：

数据源：

fromData: {
  name: '',
  health: {
    height: ''
  }
}

1、给 el-form-item 的 prop设为：prop="health.height" 。
v-model 设为: v-model="fromData.health.height"

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

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

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

具体代码

<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>