elemint-ui 表单验证prop设置问题

Question

现在想要通过el-tabs动态添加form表单，但是这里的表单验证规则应该如何写，试过了集中写法都不行

`

<el-tabs v-model="editableTabsValue" type="border-card" editable style="margin: 10px;" @edit="handleTabsEdit">
  <el-tab-pane
    v-for="(wrapItem, wrapIndex) in editableTabs"
    :key="wrapItem.name"
    :label="wrapItem.title"
    :name="wrapItem.name"
  >
   <el-form
      ref="dynamicValidateForm"
      :model="formData[wrapIndex]"
      label-width="100px"
    >
     <el-form-item
          label="应用名"
          :rules="[
            { required: true, message: '请输入应用名，应用名2-10个字', trigger: 'blur'},
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
          ]"
          :prop="formData[wrapIndex].app_name"
        >
          <el-input
            v-model="formData[wrapIndex].app_name"
            placeholder="4-20个字符，中文占两个"
          />
        </el-form-item>
         </el-form>
  </el-tab-pane>
</el-tabs>
        `
        
        
        

这里的prop应该如何写才会生效呢？
试过将prop设置为app_name，会报错
万分感激。

Answer 1

prop设为app_name 就好了吧 ? 你报错是不是你没去掉prop前面的":"

:prop="app_name"

Answer 2

这个是我自己封装的组件

<script>
export default {
    props:{
        leixing:{
            type:String,
            default:'text'
        },
        type:{
            type:String,
            default:'name'
        }
    },
    data(){
        var checkEmail = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('邮箱不能为空'));
            }
            if (value) {
                setTimeout(() => {
                    var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                    if (!reg.test(value)) {
                        callback(new Error('请输入有效的电子邮箱！'));
                    } else {
                        callback();
                    }
                }, 500);
            }
        };
        var checkPhone = (rule,value,callback) =>{
            if(!value){
                return callback(new Error('手机号码不能为空'));
            }
            if(value){
                setTimeout(() => {
                    var pattern = /^1[34578]\d{9}$/;
                    if(!pattern.test(value)){
                        callback(new Error('请输入有效的手机号码'))
                    }else{
                        callback();
                    }
                }, 500);
            }
        }
        var checkAge = (rule,value,callback) =>{
            if (!value) {
                return callback(new Error('年龄不能为空'));
            }
            setTimeout(() => {
            if (!Number.isInteger(value*1)) {
                callback(new Error('请输入数字值'));
            } else {
                if (value < 18) {
                callback(new Error('必须年满18岁'));
                } else {
                callback();
                }
            }
            }, 1000);
        }
        var checkText = (rule,value,callback) => {
            if(!value){
                return callback(new Error('内容不能为空'))
            }
            setTimeout(() => {
                let val = value.split(',')
                // console.log('转换',val)
                if(val.length==16){
                    this.leng = val.length
                    return
                }
            },500)
        }
        return{
            ruleForm:{},
            leng:'',
            rules:{
                name:[
                    {
                        required:true,message:'请输入商品分类',trigger:'blur'
                    }
                ],
                email:[
                    {
                        required:true,validator:checkEmail,trigger:['blur','change']
                    }
                ],
                age:[
                    { required: true, validator:checkAge,trigger:'blur'},
                ],
                phone:[
                    { required: true, validator:checkPhone,trigger:['blur','input']},
                ],
                card:[
                    {required:true,validator:checkText,trigger:['blur','change']}
                ]
            },
        }
    },
    watch:{
        type(){
            ruleForm[this.type] = ''
        }
    },
    methods:{
        validateEmail(formName){
            let b = this.$refs[formName].validateField(this.type,(valid)=>{
                if(!valid){
                    console.log('验证通过')
                    console.log('值',this.ruleForm)
                }else{
                    console.log('验证失败')
                    return false
                }
            })
        },
    }
}
</script>