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)

        }

    }

}

————————————————

版权声明：本文为CSDN博主「qianyiyiyi」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/u013466380/article/details/84967491