vue element table中自定義一些input的驗證

官網原話

Form 組件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，並將 Form-Item 的 prop 屬性設置爲需校驗的字段名即可。

表單

el-form表單必備以下三個屬性：

:model="ruleForm" 綁定的數據內容

:rules="rules" 動態綁定的rules，表單驗證規則

ref="ruleForm"  綁定的對象

template模塊

其實問題關鍵就在於如何給el-form-item動態綁定prop

               :prop="'tableData.' + scope.$index + '.字段名'"

<template>
    <div class="TestWorld">
        <el-button @click="addLine">添加行數</el-button>
        <el-button @click="save('formDom')">baocun</el-button>
        <el-form :rules="formData.rules" :model="formData"  ref="formDom" class="demo-ruleForm">
        <el-table
          :data="formData.tableData"
          style="width: 100%">
          <el-table-column prop="bookname" label="書名">
             <template slot-scope="scope">
                <el-form-item :prop="'tableData.' + scope.$index + '.bookname'" :rules='formData.rules.name'>
                  <el-input v-model="scope.row.bookname" placeholder="書名" ></el-input>
                </el-form-item>
             </template>
          </el-table-column>
          <el-table-column prop="bookvolume" label="冊數">
              <template slot-scope="scope">
                 <el-form-item :prop="'tableData.' + scope.$index + '.bookvolume'" :rules="formData.rules.volume1">
                    <el-input v-model.number="scope.row.bookvolume" placeholder="冊數"></el-input>
                 </el-form-item>
              </template>
          </el-table-column>
          <el-table-column prop="bookbuyer" label="購買者">
              <template slot-scope="scope">
                 <el-form-item :prop="'tableData.' + scope.$index + '.bookbuyer'" :rules='formData.rules.name'>
                    <el-input v-model="scope.row.bookbuyer" placeholder="購買者"></el-input>
                 </el-form-item>
              </template>
          </el-table-column>
          <el-table-column prop="bookborrower" label="借閱者">
             <template slot-scope="scope">
               <el-form-item :prop="'tableData.' + scope.$index + '.bookborrower'" :rules='formData.rules.name'>
                   <el-input v-model="scope.row.bookborrower" placeholder="借閱者"></el-input>
               </el-form-item>
             </template>
          </el-table-column>
          <el-table-column prop="bookbuytime" label="購買日期">
             <template slot-scope="scope">
               <el-form-item :prop="'tableData.' + scope.$index + '.bookbuytime'" :rules='formData.rules.data1'>
                 <el-date-picker
                   v-model="scope.row.bookbuytime"
                   type="date"
                   placeholder="購買日期">
                 </el-date-picker>
               </el-form-item>
             </template>
          </el-table-column>
          <el-table-column  label="操作">
             <template slot-scope="scope">
               <el-button
                  size="mini"
                  type="danger"
                  v-if="!scope.row.editing"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)">刪除
               </el-button>
             </template>
          </el-table-column>
        </el-table>
       </el-form>
    </div>
</template>
      

vuejs 代碼

export default {
    name:'TestWorld',
    data() {
        return {
             formData:{
                  rules:{
                    name:{ 
                            type:"string",
                            required:true,
                            message:"必填字段",
                            trigger:"blur"
                          },
                    volume1:{ 
                                type:"number",
                                required:true,
                                message:"冊數必須爲數字值",
                                trigger:"change"
                            },
                    data1:{ 
                            type:"date",
                            required:true,
                            message:"請選擇日期",
                            trigger:"change"
                           }
                   },
                  tableData:[{
                    bookname: '',
                    bookbuytime: '',
                    bookbuyer: '',
                    bookborrower: '',
                    bookvolume:''
                  }]
              }
        }
    },
    methods:{
        addLine(){ //添加行數
            var newValue = {
                  bookname: '',
                  bookbuytime: '',
                  bookbuyer: '',
                  bookborrower: '',
                  bookvolume:''
              };
            //添加新的行數
            this.formData.tableData.push(newValue);
        },
        handleDelete(index){ //刪除行數
            this.formData.tableData.splice(index, 1)
        },
        save(formName){  //保存
            this.$refs[formName].validate((valid,model) => {
                console.log(valid)
                console.log(JSON.stringify(model))
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
    
          });
        },
        handleDelete(index){ //刪除行數
           console.log(index)
           this.formData.tableData.splice(index, 1)
        }
    }

}