element 表格中的表单验证 demo

<template>
    <div >
      <el-button @click="handleAdd">新增</el-button>
      <el-button @click="handleDelete">删除</el-button>
      <el-form :rules="model.rules" :model="model"  ref="form">
          <el-table
          border
          @selection-change="handleSelectionChange"
          ref="multipleTable"
          :data="model.tableData"
          style="width: 200px;"
          >
          <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
          <el-table-column
              width="100px"
              label="要求批次">
              <template slot-scope="scope">
                      <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules='model.rules.name'>
                          <el-input style="width:80px"  v-model="scope.row.name" ></el-input>
                      </el-form-item>
              </template>
          </el-table-column>
          </el-table>
      </el-form>
    </div>
</template>
<script>
export default {
  name: 'Page404',
  data(){
    return {
      model:{
        tableData:[],
        multipleTable:[],
        rules:{
          name:[{ required: true, message: '请输入', trigger: 'blur' },]
        }
      }
    }
  },
  methods:{
    handleAdd(){
      this.model.tableData.push({
        name:"",
      })
    },
    handleDelete(){
      let {multipleTable} = this;
      this.model.tableData = this.model.tableData.filter(item => {
        // 对比vue 数组内置的id号当做行号
        return !multipleTable.find(i => i.__ob__.dep.id === item.__ob__.dep.id);
      });
    },
    handleSelectionChange(val){
      this.multipleTable = val;
    }
  },
}
</script>