element ui 表格實現input驗證

 

 

 

 

 

<template>
  <div>
    <el-form :model="forms" ref="forms" :rules="rules">
      <el-table :data="forms.voList">
        <el-table-column
        label="商品名稱">
          <template slot-scope="scope">
              <el-input v-model="scope.row.goodsName"></el-input>
          </template>
        </el-table-column>

        <el-table-column
          label="商品編碼">
          <template slot-scope="scope">
              <el-input v-model="scope.row.goodsCode"></el-input>
          </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-input v-model="scope.row.num"></el-input>
          </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>