vue element ui 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)
        }
    }
 
}

--------------------- 
作者：qianyiyiyi 
来源：CSDN 
原文：https://blog.csdn.net/u013466380/article/details/84967491 
版权声明：本文为博主原创文章，转载请附上博文链接！