el-form 嵌套el-table 校验

<template>
<div>
  <el-dialog
    :title="'新建'"
    :close-on-click-modal="false"
    append-to-body :before-close="handleClose"
    :visible.sync="visible" width="60%">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" >
      <el-form-item label="上级分类" prop="pid">
        <!--<el-input v-model="dataForm.pid" placeholder="上级分类"></el-input>-->
        <treeselect v-model="dataForm.pid" :options="menuOptions" :normalizer="normalizer" :show-count="true"
                    placeholder="选择上级菜单" @select="getNodeValue" noOptionsText="暂无数据"/>
      </el-form-item>
      <!--分类名称 {{dataForm.houseName}}-->

      <el-table :data="dataForm.list" height="250" border style="width: 100%" :key="itemKey">
      <!--<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="备注" width="180">
          <template slot-scope="scope">
            <el-form-item>
              <el-input v-model="scope.row.remarks1" placeholder=""></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="relevant_files1" label="平面图">
          <template slot-scope="scope">
          <!--  <el-form-item></el-form-item>-->
              <vFile v-model="scope.row.relevantFiles1" prop="relevantFiles" :required="false" :extension-type-list="['图片','表格','文档','PDF','压缩包']"/>
          </template>

        </el-table-column>
        <el-table-column label="操作" width="80">
          <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="handleClose">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>


import { getAllTreeNodes,saveListStructure } from "@/api/……"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "structAdd",
  components: {
    Treeselect,
  },
  data(){
    return{
      visible: false,
      canSubmit: false,
      dataRule: {
        pid: [
          { required: true, message: '无上级分类', trigger: 'blur' }
        ],
        houseName1: [
          { required: true, message: '分类名称不能为空', trigger: 'blur' }
        ],
      },
      dataForm: {
        id: null,
        houseName:"",
        pid:"",
        path:"",
        sort:"",
        relevantFiles: '',
        remarks:"",
        list:[{
          houseName1:"",
          pid1:"",
          path1:"",
          sort1:"",
          relevantFiles1: '',
          remarks1:"",
        }]
      },
      menuOptions: [],
      itemKey :0
    }
  },
  created() {
    this.menuOptions = [];

    getAllTreeNodes({
      aa: "111"
    }).then(res =>{
      this.menuOptions = this.toTree(res.data.data.data, 0, "id", "houseName", "pid");
    })
  },
  mounted() {
  },
  methods:{
    init(param){
      this.dataForm= {
        id: null,
        houseName:"",
        pid:"",
        path:"",
        pathName: "",
        sort:"",
        relevantFiles: '',
        remarks:"",
        list:[{
          houseName1:"",
          pid1:"",
          path1:"",
          pathName1: "",
          sort1:"",
          relevantFiles1: '',
          remarks1:"",
        }]
      }

      if(param.pid == "0"){
        this.dataForm.pid = "1"
      }
      else{
        this.dataForm.pid = param.id
      }

      this.dataForm.houseName = param.houseName
      this.dataForm.path = param.path
      this.dataForm.pathName = param.pathName

      // this.dataForm.id = id || 0
      this.visible = true
      this.canSubmit = true

      // console.log('param=')
      // console.log(param)

    },
    addClick(){
      this.dataForm.list.push({
        houseName1:"",
        pid1:"",
        path1:"",
        pathName1:"",
        sort1:"",
        relevantFiles1: '',
        remarks1:""
      })
    },
    delClick(index){
      this.dataForm.list.splice(index,1)
      this.itemKey ++
    },
    dataFormSubmit(){
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.canSubmit = false
          // console.log(this.dataForm);

          saveListStructure({

          }).then((res)=>{
            this.$notify.success('保存成功')
            this.$emit('refreshDataList')
            this.visible = false

          }).catch(() => {
              this.canSubmit = true
          })

        }
      })
    },
    setAddStructRecord(){
      let rRecord = [];
      for(let item of this.dataForm.list){
        rRecord.push({
          id: null,
          houseName:item.houseName1,
          pid:this.dataForm.pid,
          sort:item.sort1,
          relevantFiles: item.relevantFiles1,
          remarks:item.remarks1
        })
      }
      return rRecord;
    },
    /**
     * 更改为toTree(数据,第一层的pid值,id名,label名,pid名)
     *
     * 例:toTree(data,0,menuId,menuName,menuPid)
     */
    toTree(data, id, idName, labelName, pidName) {
      var result = [],
        temp;
      for (var i in data) {
        data[i].id = data[i][idName];
        data[i].label = data[i][labelName];
        if (data[i][pidName] == id) {
          result.push(data[i]);
          temp = this.toTree(data, data[i][idName], idName, labelName, pidName);
          if (temp.length > 0) {
            data[i].children = temp;
          }
        }
      }
      return result;
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.houseName,
        children: node.children,
      };
    },
    getNodeValue(param) {

      if(param.pid == "0"){
        this.dataForm.pid = "1"
      }
      else{
        this.dataForm.pid = param.id
      }

      this.dataForm.houseName = param.houseName
      this.dataForm.path = param.path
      this.dataForm.pathName = param.pathName
    },
    handleClose(){
      this.dataForm= {
        id: null,
        houseName:"",
        pid:"",
        path:"",
        pathName: "",
        sort:"",
        relevantFiles: '',
        remarks:"",
        list:[{
          houseName1:"",
          pid1:"",
          path1:"",
          pathName1: "",
          sort1:"",
          relevantFiles1: '',
          remarks1:"",
        }]
      }
      this.itemKey++
      this.visible = false
    },

  }
}
</script>

<style scoped>

</style>