element-ui表单验证数据绑定踩坑点

最新推荐文章于 2022-07-28 23:58:42 发布

Hzzzz_zzzzz

最新推荐文章于 2022-07-28 23:58:42 发布

阅读量838

点赞数 1

本文链接：https://blog.csdn.net/Zoey_J/article/details/103146864

版权

本文介绍了在使用Element-UI进行表单验证时遇到的动态绑定坑点，特别是关于动态绑定prop和rule的注意事项。当数据结构复杂，如tbData中包含tbHeader数组，prop应完整指定到value字段，而rule的动态绑定也需要详细指定验证规则，即使在el-form中已设置:rules。

摘要由CSDN通过智能技术生成

基础用法很简单：

<template>
  <el-form :model="dataForm" :rules="ruleForm" class="m-form" label-width="65px">
    <el-row :gutter="50">
      <el-col :span="8">
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="性别：" prop="sex">
          <el-select v-model="dataForm.sex">
            <el-option v-for="(item, key) in sexOpt" :key="key" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-ite