elementui表格中嵌套表单校验

最新推荐文章于 2024-09-12 11:06:36 发布

weixin_45428021

最新推荐文章于 2024-09-12 11:06:36 发布

阅读量310

点赞数 1

分类专栏： elementui表格文章标签： elementui vue.js javascript

原文链接：https://www.cnblogs.com/helena000/p/11418445.html

版权

elementui表格专栏收录该内容

9 篇文章 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+'.goodsName'">
              <el-input v-model="scope.row.goodsName"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="商品编码">
          <template slot-scope="scope">
            <el-form-item :prop="'voList.'+scope.$index+'.goodsCode'">
              <el-input v-model="scope.row.goodsCode"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <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"
          },
          {
            goodsName:"花生",
            goodsCode:"4574511",
            specification:null,
            unit:"斤",
            num:1,
            unitPrice:8.55,
            taxRate:0.17,
            taxAmount:1.45,
            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>
<style scoped lang="scss">

</style>