el-table + form.rules 动态表格+表单验证

el-table + form.rules
动态表格+表单验证
重点在data, 重构数据结构,把rules 和 表单数据 ,放在一个对象里

<template>
 <el-form :model="ruleForm" :rules="ruleForm.rules" ref="formRef">
   <el-table  :data="ruleForm.familyList" style="width: 100%;" :row-style="{height:70+'px'}" border>
	 <el-table-column prop="name" label="姓名" width="110">
            <template slot-scope="scope">
          	  <el-form-item  :prop="'familyList.' + scope.$index + '.name'" :rules="ruleForm.rules.name">
                <el-input v-model="scope.row.name"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="gender" label="性别" width="80">
            <template slot-scope="scope">
              <el-form-item  :prop="'familyList.' + scope.$index + '.gender.code'" :rules="ruleForm.rules.gender">
                <el-select v-model="scope.row.gender.code" placeholder="请选择" style="width: 60px;">
                  <el-option v-for="item in sexList" :key="item.code" :label="item.name" :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="出生年月日 " width="200">
            <template slot-scope="scope">
              <el-form-item  :prop="'familyList.' + scope.$index + '.birthday'" :rules="ruleForm.rules.birthday">
                <el-date-picker v-model="scope.row.birthday"
                  @change="changeday(scope.$index,scope.row.birthday, 'birthday')" type="date" placeholder="选择日期"
                  style="width: 170px;">
                </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="fileStoreList" label="附件" width="200">
            <template slot-scope="scope">
                <p v-for="(it,index) in scope.row.fileStoreList">
                  <a :href=it.url :download=it.url style="color: #1ab394">{{it.originName}}</a>
                  <!-- <span v-show="it" v-if="type !== 'view'" @click="delFile(it.id, scope.row.id, scope.$index, index)" -->
                  <span v-show="it" v-if="type !== 'view'" @click="delFile(scope.$index, index)"
                    class="delFileBtn">删除</span>
                </p>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="250" fixed="right" >
            <template slot-scope="scope">
              <el-upload :action="baseUrl+'/file/upload'" :headers="headers" :limit="10" :file-list="files"
                :on-success="fileUpload" :on-remove="removeFile" :show-file-list="false"
                style="display: inline;margin-right: 10px;">
                <el-button type="primary" size="mini" class="otherBtn" @click="uploadInd(scope.$index)">上传附件</el-button>
              </el-upload>
              <el-button type="warning" size="mini" @click="delBtn(scope.$index)">删除
              </el-button>
            </template>
          </el-table-column>
   </el-table>
<el-form>
  <el-button v-show=" this.type !== 'view'" @click="addDomain" style="margin-top: 10px;">新增亲属</el-button>
</template>

data:{
        sexList: [{ code: 0, name: '男' }, { code: 1, name: '女' }],
        files: [],
        uploadIndex: null,
	    ruleForm: {
          familyList: [],

          rules: {
            name: [
              { required: true, message: '请输入姓名', trigger: 'blur' },
            ],
            gender: [
              { required: true, message: '请选择性别', trigger: 'change' },
            ],
            birthday: [
              { required: true, message: '请选择日期', trigger: 'change' }
            ],
          }
        },
}

method:{
      addDomain() {
        var dom = {
          gender: { code: '', name: '' },
          appellation: { code: '', name: '' },
          fileStoreIds: null,
          // files: [],
          fileStoreIdsarr: [],
          fileStoreList: []
        }
        this.ruleForm.familyList.push(dom);
      },
      submitForm() {
	      if (this.ruleForm.familyList.length > 0) {
          this.$refs['formRef'].validate((valid) => {
            if (valid) {
              console.log(this.ruleForm.familyList);
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }
	  },
	  
      delFile(i, index) {
        this.ruleForm.familyList[i].fileStoreList.splice(index, 1)
        this.ruleForm.familyList[i].fileStoreIdsarr.splice(index, 1)
        this.ruleForm.familyList[i].fileStoreIds = this.ruleForm.familyList[i].fileStoreIdsarr.toString()
      },
      fileUpload(response, file, fileList) {
        this.ruleForm.familyList[this.uploadIndex].fileStoreList.push(response.object[0])
        this.ruleForm.familyList[this.uploadIndex].fileStoreIdsarr.push(response.object[0].id)
        this.ruleForm.familyList[this.uploadIndex].fileStoreIds = this.ruleForm.familyList[this.uploadIndex].fileStoreIdsarr.toString();
      },
      removeFile(file, fileList) {
        console.log('移除文件!', file, fileList);
        const index = this.files.findIndex(fileItem => {
          return fileItem.uid === file.uid
        })
        this.ruleForm.familyList[this.uploadIndex].fileStoreList.splice(index, 1)
      },
      delBtn(ind) {
        console.log('delBtn', ind)
        this.ruleForm.familyList.splice(ind, 1)
      },
	  changeday(ind, val, name) {
		console.log(ind, val, name)
	}
}