element-ui的el-form表单和el-table校验_Example

<template>
<div>
  <el-dialog
    :title="'新建'"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" >
      <el-form-item label="上级分类">
        <el-input v-model="dataForm.pid" placeholder="上级分类"></el-input>
      </el-form-item>
      <el-form-item label="分类名称" prop="houseName">
        <el-input v-model="dataForm.houseName" placeholder="分类名称"></el-input>
      </el-form-item>
      <el-table :data="dataForm.list" height="250" border style="width: 100%">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column prop="houseName1" label="结构名称" width="180">
          <template slot-scope="scope">
            <el-form-item :prop="'list.'+scope.$index+'.houseName1'" :rules="dataRule.houseName1" >
              <el-input v-model="scope.row.houseName1" placeholder="" ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="sort1" label="排序" width="180">
          <template slot-scope="scope">
            <el-form-item>
            <el-input-number v-model="scope.row.sort1" :min="0" :max="9999"></el-input-number>
            </el-form-item>
          </template>

        </el-table-column>
        <el-table-column prop="remarks1" label="备注">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remarks1" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="relevant_files1" label="附件"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addClick()">增加</el-button>
            <el-button @click="delClick(scope.$index)" v-if="dataForm.list.length > 1" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "structAdd",
  data(){
    return{
      visible: false,
      canSubmit: false,
      dataRule: {
        houseName: [
          { required: true, message: '分类名称不能为空none', trigger: 'blur' }
        ],
        houseName1: [
          { required: true, message: '分类名称不能为空', trigger: 'blur' }
        ],
      },
      dataForm: {
        id: null,
        houseName:"",
        pid:"",
        path:"",
        sort:"",
        relevantFiles: '',
        remarks:"",
        list:[{
          houseName1:"",
          pid1:"",
          path1:"",
          sort1:"",
          relevantFiles1: '',
          remarks1:"",
        }]
      },
    }
  },
  methods:{
    addClick(){
      this.dataForm.list.push({
        houseName1:"",
        pid1:"",
        path1:"",
        sort1:"",
        relevantFiles1: '',
        remarks1:""
      })
    },
    delClick(index){
      this.dataForm.list.splice(index,1)
    },
    dataFormSubmit(){

      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          console.log(this.dataForm);
          console.log(6677667777)
        }
      })
    }

  }
}
</script>

<style scoped>

</style>