vue table增删改查input框之校验必填项

          <el-form :model="testForm" ref="testForm" :rules="testFormRules" label-width="100px" :inline="true">

            <el-form-item label="属性组名：" prop="testFormGroupName">
              <el-input placeholder="请输入内容" v-model="testForm.testFormGroupName" maxlength="32"></el-input>
            </el-form-item>

            <el-form-item label="组标识符：" prop="testFormQualifier">
              <el-input placeholder="请输入内容" v-model="testForm.testFormQualifier" maxlength="32"></el-input>
            </el-form-item>

            <el-form-item label="组类型：" prop="testFormType">
              <el-select v-model="testForm.testFormType" placeholder="请选择" @change="getMoreGroupTypeValue">
                <el-option v-for="item in groupTypeTable" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <!--新增属性组弹框---table-->
          <div class="div-card" style="background-color: #f2f2f2;">
            <div class="div-card">
              <template>

                <el-form ref="form" :rules="rulesPro" :model="form">

                  <el-table ref="morelPropItemTable" :data="form.morelPropItemTable" border stripe style="width: 100%;">

                    <el-table-column label="顺序" align="center">
                      <template slot-scope="scope">
                        <el-form-item :prop="'morelPropItemTable.' + scope.$index + '.propertySequence'"
                                      :rules="rulesPro.propertySequence">
                          <el-input v-model="scope.row.propertySequence" placeholder="顺序"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <el-table-column label="属性名" align="center">
                      <template slot-scope="scope">
                        <el-form-item :prop="'morelPropItemTable.' + scope.$index + '.propertyName'"
                                      :rules="rulesPro.propertyName">
                          <el-input v-model="scope.row.propertyName" placeholder="属性名" maxlength="32"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <el-table-column label="标识符" align="center">
                      <template slot-scope="scope">
                        <el-form-item :prop="'morelPropItemTable.' + scope.$index + '.propertyQualifier'"
                                      :rules="rulesPro.propertyQualifier">
                          <el-input v-model="scope.row.propertyQualifier" placeholder="标识符" maxlength="32"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <el-table-column label="参数类型" align="center">
                      <template slot-scope="scope">
                        <el-form-item :prop="'morelPropItemTable.' + scope.$index + '.propertyType'"
                                      :rules="rulesPro.propertyType">
                          <el-select v-model="scope.row.propertyType" placeholder="请选择">
                            <el-option
                              v-for="item in propertyTypeTable"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <el-table-column label="精度" align="center">
                      <template slot-scope="scope">
                        <el-form-item :prop="'morelPropItemTable.' + scope.$index + '.accuracy'"
                                      :rules="rulesPro.accuracy">
                          <el-input v-model="scope.row.accuracy" placeholder="精度"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <el-table-column label="单位" align="center">
                      <template slot-scope="scope">
                        <el-form-item :prop="'morelPropItemTable.' + scope.$index + '.unit'" :rules="rulesPro.unit">
                          <el-input v-model="scope.row.unit" placeholder="单位"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <el-table-column label="操作" align="center">
                      <template slot-scope="scope">
                        <el-form-item>
                          <el-button type="text" size="medium" @click="moreDeleteParam(scope.$index)">
                            <i class="el-icon-delete" aria-hidden="true"></i>
                          </el-button>
                        </el-form-item>
                      </template>
                    </el-table-column>

                  </el-table>

                </el-form>

                <div style="text-align:center">
                  <el-button type="text" @click="moreAddParam">新增</el-button>
                </div>
              </template>
            </div>
          </div>

          <div style="margin-top: 1%; text-align:center ">
            <el-button @click="clearMoreProGroup">取消</el-button>
            <el-button type="primary" :plain="true" @click="saveMoreProGroup">保存</el-button>
          </div>

data() {
      return {
        testForm: {
          testFormQualifier: '',
          testFormGroupName: '',
          testFormType: '',
        },
        testFormRules: {
          testFormQualifier: [{required: true, message: '请输入组标识符', trigger: 'blur'}],
          testFormGroupName: [{required: true, message: '请输入属性组名称', trigger: 'blur'}],
          testFormType: [{required: true, message: '请选择组类型', trigger: 'change'}]
        },
        form: {
          morelPropItemTable: []
        },
        // 增加属性组的属性
        morelPropItemTable: [{
          propertySequence: '',
          propertyName: '',
          propertyQualifier: '',
          propertyType: '',
          accuracy: '',
          unit: ''
        }]
},

methods: {
      //增加行
      moreAddParam() {
        this.moreParamEditFlag = true;
        this.form.morelPropItemTable.push({
          edit: true,
        });
      },
      //删除
      moreDeleteParam(index) {
        this.form.morelPropItemTable.splice(index, 1);
      },
      // 保存
	  saveMoreProGroup() {
        var modelPropertyGroupParam = {};
        this.$refs.testForm.validate(valid => {
          if (valid) {
            modelPropertyGroupParam["groupName"] = this.testForm.testFormGroupName;
            modelPropertyGroupParam["groupQualifier"] = this.testForm.testFormQualifier;
            modelPropertyGroupParam["category"] = this.testForm.testFormType;
          }
        })

        if (this.form.morelPropItemTable.length > 0) {
          this.$refs.form.validate(valid => {
            if (valid) {
              modelPropertyGroupParam["id"] = null;
              modelPropertyGroupParam["groupId"] = null;
              modelPropertyGroupParam["modelId"] = this.getTableDetail.id;
              modelPropertyGroupParam["modelPropertyItemList"] = this.form.morelPropItemTable;
              savePro(modelPropertyGroupParam).then(response => {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
              });
            }
          });
        }
        
      }
  }