zoukankan      html  css  js  c++  java
  • element-ui复杂表单校验

    复杂表单如下:

    <el-form size="mini" :rules="rules" :model="form"
                   label-width="120px"
                   label-position="right" >
            <el-form-item label="活动名称" prop="name" 
                          :rules="[{required:true,message:'不能为空',trigger:'blur'}]"
         > <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动场地" prop="address.name"
                          :rules="[{required:true,message:'不能为空',trigger:'blur'}]"

    >
              <el-input v-model="form.address.name"></el-input>
            </el-form-item>
            <span v-for="(item,index) in form.sponsor">
              <el-form-item :label="'主办方'+(Number(index)+1)"
                            :prop="'sponsor.'+index+'.name'"
                            :rules="[{required:true,message:'不能为空',trigger:'blur'}]"
              >
                <el-input v-model="item.name"></el-input>
              </el-form-item>
            </span>
            <span v-for="(item,index) in form.advices">
              <el-form-item label="建议事项"
                            :prop="'advices.'+index+'.content'"
                            :rules="[{required:true,message:'不能为空',trigger:'blur'}]"
              >
                <el-input type="textarea" v-model="item.content"></el-input>
              </el-form-item>
              <span class="but-words" @click="deleteAdvices(index)">删除</span>
            </span>
            <br/>
            <el-button size="mini" @click="addAdvices">添加建议事项</el-button>
          </el-form>
    export default {
          ...
          data(){
            return {
              form:{
                name:'',
                address:{
                  id:'',
                  name:''
                },
                sponsor:[
                  {id:'1',name:'Tom'},
                  {id:'2',name:'Jack'}
                ],
                advices:[]
              },
              rules:{
            //也可以写在data中 //name:[{required:
    true,message:'不能为空',trigger:'blur'}], //'address.name':[{required:true,message:'不能为空',trigger:'blur'}], //'sponsor.0.name':[{required:true,message:'不能为空',trigger:'blur'}]//校验也可以这样写 } } }, methods:{ deleteAdvices(idx){ this.form.advices.splice(idx,1) }, addAdvices(){ let obj = { content:'' } this.form.advices.push(obj) } } }

    效果图:

  • 相关阅读:
    bzoj 3209: 花神的数论题 数位dp
    bzoj 1799: [Ahoi2009]self 同类分布 数位dp
    Codeforces 755 F. PolandBall and Gifts 多重背包+贪心
    Educational Codeforces Round 17 D. Maximum path DP
    Codeforces Round #396 (Div. 2) C. Mahmoud and a Message DP
    Codeforces 768 E. Game of Stones 博弈DP
    HDU 2457/POJ 3691 DNA repair AC自动机+DP
    Codefoces 791D. Bear and Tree Jumps 树形DP
    Codeforces 440 D. Berland Federalization 树形DP,记录DP
    Codeforces 709E. Centroids 树形DP
  • 原文地址:https://www.cnblogs.com/YuKiee/p/9651086.html
Copyright © 2011-2022 走看看