你在使用vue+elementUI技術棧的時候，有沒有碰到表格嵌套表單需求以及需要前台的一個校驗？
這里為大家寫了一個demo:
1 <template> 2 <div> 3 <el-form :model="forms" ref="forms" :rules="rules"> 4 <el-table :data="forms.voList"> 5 <el-table-column 6 label="商品名稱"> 7 <template slot-scope="scope"> 8 <el-form-item :prop="'voList.'+scope.$index+'.goodsName'"> 9 <el-input v-model="scope.row.goodsName"></el-input> 10 </el-form-item> 11 </template> 12 </el-table-column> 13 <el-table-column 14 label="商品編碼"> 15 <template slot-scope="scope"> 16 <el-form-item :prop="'voList.'+scope.$index+'.goodsCode'"> 17 <el-input v-model="scope.row.goodsCode"></el-input> 18 </el-form-item> 19 </template> 20 </el-table-column> 21 <el-table-column 22 label="價格"> 23 <template slot-scope="scope"> 24 <el-form-item :prop="'voList.'+scope.$index+'.unitPrice'" :rules="rules.unitPrice"> 25 <el-input v-model="scope.row.unitPrice"></el-input> 26 </el-form-item> 27 </template> 28 </el-table-column> 29 <el-table-column 30 label="數量"> 31 <template slot-scope="scope"> 32 <el-form-item :prop="'voList.'+scope.$index+'.num'" :rules="rules.unitPrice"> 33 <el-input v-model="scope.row.num"></el-input> 34 </el-form-item> 35 </template> 36 </el-table-column> 37 </el-table> 38 </el-form> 39 <el-button type="primary" @click="save">批量開票</el-button> 40 </div> 41 </template> 42 43 <script> 44 export default { 45 name: "table", 46 data(){ 47 return { 48 forms:{ 49 id:1, 50 documentNo:null, 51 buyerName:"服務技術", 52 buyerDp:"42118XXXXXXXXXX72X", 53 buyerBankAccount:"招商銀行4890284", 54 buyerAddressPhone:"深圳市寶安區110112", 55 buyerEmail:null, 56 buyerPhone:null, 57 buyerType:"01", 58 remarks:"這是備注", 59 total:350.9, 60 voList:[ 61 { 62 goodsName:"黃金", 63 goodsCode:"44021940", 64 specification:null, 65 unit:"克", 66 num:1, 67 unitPrice:291.37, 68 taxRate:0.17, 69 taxAmount:49.53, 70 favouredPolicy:"0", 71 zeroTaxRate:"", 72 hsbz:"1" 73 }, 74 { 75 goodsName:"花生", 76 goodsCode:"4574511", 77 specification:null, 78 unit:"斤", 79 num:1, 80 unitPrice:8.55, 81 taxRate:0.17, 82 taxAmount:1.45, 83 favouredPolicy:"0", 84 zeroTaxRate:"", 85 hsbz:"1" 86 } 87 ] 88 }, 89 rules:{ 90 num:[{required:true,message:'數量不能為空',trigger:'blur'}], 91 unitPrice:[{required:true,message:'單價不能為空',trigger:'blur'}] 92 } 93 } 94 }, 95 methods:{ 96 save(){ 97 this.$refs['forms'].validate((valid)=>{ 98 if(valid){ 99 console.log(1) 100 } 101 }) 102 } 103 } 104 } 105 </script> 106 <style scoped lang="scss"> 107 108 </style>
你可以在你的vue項目中嘗試一下。
希望這個demo對你有所幫助！