element-ui

[heikaimu]

多层级数据时的表单验证

https://m.jb51.net/article/163780.htm

elm-ui使用表单验证是非常简单的，官方列子应该是一看就会，但是如果表单的数据时多层的官方就没有案例。那应该怎么做呢？

  export default {
    data() {
      return {
        formData: {
          familyName: '苹果之家',
          familyMember: 3,
          members: [
            {
              role: '父亲',
              name: '王二'
            },
            {
              role: '母亲',
              name: '翠花'
            },
            {
              role: '儿子',
              name: '小明'
            }
          ]
        }
      }
    }
  }

如果我们现在写一个添加页面，需要验证每个家庭成员的输入内容是否为空。

<el-form :model="formData" :rules="rules">
        <el-form-item label="家庭名字" prop="familyName">
          <el-input v-model="formData.familyName"></el-input>
        </el-form-item>
        <el-form-item label="家庭成员人数" prop="familyMember">
          <el-input v-model="formData.familyMember"></el-input>
        </el-form-item>
        <div v-for="(item, index) in formData.members">
          <el-form-item :label="`成员${index+1}`">
            <el-form-item label="身份" :prop="`members[${index}].role`">
              <el-input v-model="item.role"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :prop="`members[${index}].name`">
              <el-input v-model="item.name"></el-input>
            </el-form-item>
          </el-form-item>
        </div>
      </el-form>

验证规则则必须这样写

export default {
  data() {
   return {
    rules: {
     'members[0].role': [ { required: true, message: '身份不能为空'} ],
     'members[1].role': [ { required: true, message: '身份不能为空'} ],
     'members[2].role': [ { required: true, message: '身份不能为空'} ],
     'members[0].name': [ { required: true, message: '姓名不能为空'} ],
     'members[1].name': [ { required: true, message: '姓名不能为空'} ],
     'members[2].name': [ { required: true, message: '姓名不能为空'} ],
    }
   }
 }
}

虽然感觉写得很繁杂，但是目前只找到这一个办法。

el-select弹出两次

下拉框弹出两次导致动画抖动，加上下面的全局样式即可解决。

.el-zoom-in-top-enter, .el-zoom-in-top-enter-active { transition-property: transform!important; }