vue的表格(el-table)的校验

相信如果是表单校验的话,大家一定不陌生,可以从组件中找到，但是表格校验的话组件中也没有，那么我们怎么校验表格呢？

既然表单可以校验，那么我们就建一个表单不得了，在表单的里面嵌套表格，不就行了

                 <el-form  ref="formA" :model="formA" :rules="Arules">
                  <el-table :data="formA.arrangeList" border>
                    <el-table-column label="工作内容" align="center">
                      <template slot-scope="scope">
                        <el-form-item label-width="0" v-if="scope.row.editState"  :prop="'arrangeList.' + scope.$index + '.arrangeWork'" :rules="Arules.arrangeWork">
                          <el-input v-model="scope.row.arrangeWork"
                                    placeholder="请输入工作内容"></el-input>

                        </el-form-item>
                        <span v-if="!scope.row.editState">{{scope.row.arrangeWork}}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form>

js:

data() {
      return {
        formA:{
          arrangeList: []
        },

        Arules:{
          arrangeWork: {
            required: true, message:"工作内容不能为空",trigger:'blur'
          }
        }
    }

注意点
1.prop一定要动态,即 :prop 而不是单纯的 prop
2.属性要单独校验，即声明自己的校验名称