elementui的表格嵌套表单及校验demo
2022-05-31 本文已影响0人
张宪宇
<template>
<div>
<el-form :model="forms" ref="forms" :rules="rules">
<el-table :data="forms.voList">
<el-table-column
label="价格">
<template slot-scope="scope">
<el-form-item :prop="'voList.'+scope.$index+'.unitPrice'" :rules="rules.unitPrice">
<el-input v-model="scope.row.unitPrice"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="数量">
<template slot-scope="scope">
<el-form-item :prop="'voList.'+scope.$index+'.num'" :rules="rules.unitPrice">
<el-input v-model="scope.row.num"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<el-button type="primary" @click="save">批量开票</el-button>
</div>
</template>
<script>
export default {
name: "table",
data(){
return {
forms:{
id:1,
documentNo:null,
buyerName:"服务技术",
buyerDp:"42118XXXXXXXXXX72X",
buyerBankAccount:"招商银行4890284",
buyerAddressPhone:"深圳市宝安区110112",
buyerEmail:null,
buyerPhone:null,
buyerType:"01",
remarks:"这是备注",
total:350.9,
voList:[
{
goodsName:"黄金",
goodsCode:"44021940",
specification:null,
unit:"克",
num:1,
unitPrice:291.37,
taxRate:0.17,
taxAmount:49.53,
favouredPolicy:"0",
zeroTaxRate:"",
hsbz:"1"
}
]
},
rules:{
num:[{required:true,message:'数量不能为空',trigger:'blur'}],
unitPrice:[{required:true,message:'单价不能为空',trigger:'blur'}]
}
}
},
methods:{
save(){
this.$refs['forms'].validate((valid)=>{
if(valid){
console.log(1)
}
})
}
}
}
</script>