vue element table内表单校验

1.校验当前行表单：

<template slot-scope="scope">
                <el-form :model="scope.row" :rules='rulesEdit'  :ref='"numberValidateForm"+scope.$index' class="demo-ruleForm">
                                    <el-form-item
                                            label=""
                                            prop='discountRate'
                                            :rules='rulesEdit.discountRate'
                                    >
                                       <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.discountRate"></el-input>
                                 </el-form-item>
                 </el-form>
                                <span v-show="!scope.row.show">{{scope.row.discountRate}}</span>
</template>

data(){
return{
 rulesEdit: {
                discountRate:[
                        { required: true, message: '折扣比例不能为空'},
                        { validator:Validator.number, message: '折扣比例必须为数字值',trigger:'blur'}
                ]

            }
}
}

},

methods:{

    this.$refs['numberValidateForm'+index].validate((valid) => {
                if (valid) {

                     this.$set(this.gridData['data'],index,row);
                       row.show=false;
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });

}

2.校验table内全部可编辑框

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.7/lib/index.js"></script>
<div id="app">
  <el-button type="primary" v-on:click="submitForm('ruleForm')">测试</el-button>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-table :data="ruleForm.tableData" style="width: 100%">
      <el-table-column label="日期" width="280">
        <template slot-scope="scope">
                            <el-form-item :prop="'tableData.' + scope.$index + '.date'" :rules='rules.test'>
                                <el-input style="width:100%"  v-model="scope.row.date" ></el-input>
                            </el-form-item>
         </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </el-form>
</div>

var Main = {
    data() {
      return {
        ruleForm: {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
           },
        rules: { 
          test: [
            { required: true, message: '请输入日期', trigger: 'change' }
          ] 
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }