el-element 中 动态table 验证表单里出现的一些问

1、出现的bug

动态table表单验证出现的问题.gif

2、出现bug的代码

<template>
  <div class="hf-api-create">
    <el-form
      :model="apiForm"
      ref="apiForm" 
      label-width="120px"
      size="small">
      <div class="hf-api-create__modules-box">
        <el-form-item label="API名称" prop="apiName" clearable :rules="{ required: true, message: '请输入API名称', trigger: 'blur' }">
          <el-input v-model="apiForm.apiName" placeholder="请输入API名称"></el-input>
        </el-form-item>
      </div>
      <div class="hf-api-create__modules-box">
        <div class="title">
          <h3>Header参数说明</h3>
          <i :class="[collapse.body?'el-icon-arrow-up':'el-icon-arrow-down']" @click="collapse.body=!collapse.body"></i>
        </div>
        <el-form-item v-show="!collapse.body" label-width="0">
          <el-table :data="apiForm.headerParamsArr" style="width: 900px;" max-height="250" header-row-class-name="u-table-tit">
            <el-table-column label="参数">
              <template slot-scope="scope">
                <el-form-item :prop="'headerParamsArr.' + scope.$index + '.paramName'" :rules='rules.paramName'>
                  <el-input v-model="scope.row.paramName" placeholder="请输入参数" clearable></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="描述" min-width="150">
              <template slot-scope="scope">
                <el-form-item :prop="'headerParamsArr.' + scope.$index + '.remark'">
                  <el-input v-model="scope.row.remark" placeholder="请输入描述" clearable></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <i class="el-icon-delete u-pointer u-clr-danger g-mb20" @click="removeTableRow(scope.$index, 'headerParamsArr')" ></i>
              </template>
            </el-table-column>
          </el-table>
          <div class="add-row">
            <el-button size="mini" @click="addTableRow('headerParamsArr')" icon="el-icon-plus">添加</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import APIProxy from '@/proxies/api';
import AppProxy from '@/proxies/app';
import checkform from '@/mixins/checkform'

const BASICFORM = {
  id: '',
  appId: '',
  apiName: '',
}
const HEADERPARAMSOBJ = {
  direction: '3',
  paramName: '',
  remark: '',
};
export default {
  data() {
    return {
      apiForm: {
        ...BASICFORM,
      },
      rules: {
        paramName: [{ required: true, message: '参数名不能为空', trigger: 'blur' }],
      },
    };
  },
  mixins: [
    checkform
  ],
  created() {
    this.getAppOptions()
  },
  methods: {
    addTableRow(arr) {
      switch (arr) {
        case 'headerParamsArr':
          this.apiForm.headerParamsArr.push({ ...HEADERPARAMSOBJ })
          break
        default:
          this.$message.error('添加行失败，请联系管理员');
      }
    },
    removeTableRow(index, arr) {
      this.apiForm[arr].splice(index, 1)
    },
    async submitForm() {
      if (!this.checkForm('apiForm')) {
        return;
      }
    },
    async getAppOptions() {
      const res = await APIProxy.getAppOptions();
      if (res.retCode === '000000') {
        this.appOptions = res.data;
      } else {
        this.$message.error(res.retDesc)
      }
      this.apiForm.headerParamsArr = []
      const id = this.$route.params.apiId
      if (id) {
        this.getApiDetail(id)
      } else {
        this.apiForm.headerParamsArr.push({ ...HEADERPARAMSOBJ })
      }
    },
  },
};
</script>

3. 解决办法
   apiForm里面的table数据要一开始就初始化

   
   image.png