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>
上一篇 下一篇

猜你喜欢

热点阅读