element表单验证rules只允许输入数字 elementui表单验证数字

实际项目中的场景，需要在table里做表单的验证，如图效果：

其实问题关键就在于如何给el-form-item动态绑定prop

:prop="'tableData.' + scope.$index + '.字段名'"

详见代码：

border
:data="model.tableData"
style="width: 100%;"
:default-sort = "{prop: 'date', order: 'descending'}"
>
width="100px"
label="要求批次">
width="180px"
label="要求供应商">
width="180px"
label="要求生产日期">
width="180px"
label="要求有效期至">
width="150px"
label="要求商品形态">
width="100px"
label="期待出库数量">
label="操作">
删除

export default {
data(){
return {
form:{
supplier2:"",
type:"",
desc:"",
input:""
},
model:{
rules: {
name:{ type:"string",required:true,message:"必填字段",trigger:"change"},
input:{ type:"string",required:true,message:"必填字段",trigger:"change"},
supplier:{ type:"string",required:true,message:"必填字段",trigger:"change"},
goodstatus:{ type:"string",required:true,message:"必填字段",trigger:"change"},
"producedate.start":{ type:"string",required:true,message:"必填字段",trigger:"change"},
"expireddate.start":{ type:"string",required:true,message:"必填字段",trigger:"change"}
},
tableData:[{
input:"",
name:"",
supplier:"",
goodstatus:"",
producedate:{
start:""
},
expireddate:{
start:""
}
},{
input:"",
name:"",
supplier:"",
goodstatus:"",
producedate:{
start:""
},
expireddate:{
start:""
}
}]
}
}
},
methods: {
add () {
console.log(this.form);
},
save () {
this.$refs["form"].validate((valid,model)=>{
console.log(valid);
console.log(model);
})
}
}
}

vue + element 实现登录注册(自定义表单验证规则)

注册页包含手机验证码登录和密码的二次验证. 效果如下: 实现代码: