vue el-form嵌套el-table保存校验

Question

在一个编辑页面使用了el-form嵌套el-table的形式，保存的时候使用if来判断是否空值，如果是空值的就弹出提示并且阻止提交，但是这样做好像是不对的，因为目前的状态还是不用校验就保存成功了，非常困惑，请教一下各位
以下贴上我的所有相关代码：

<el-form :model="secondClassify" ref="secondClassify">
          <xn-table
            ref="saveTab"
            :data="secondClassify.saveTabArr"
            style="width: 98%"
            :showPagination="false"
          >
            <el-table-column
              label="序号"
              type="index"
              width="60"
              align="center"
            />
            <xn-col label="排序" align="center" type="draggable" width="50px" />
            <el-table-column align="center">
              <span slot="header" slot-scope="scope">
                <span class="redSpan">*</span>名称
              </span>
              <template slot-scope="scope">
                <el-form-item
                  :prop="'saveTabArr.' + scope.$index + '.catalogName'"
                  :rules="[
                    {
                      required: true,
                      trigger: ['blur', 'change'],
                      message: '名称不能为空'
                    }
                  ]"
                >
                  <el-input
                    v-model.trim="scope.row.catalogName"
                    :maxlength="200"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <span slot="header" slot-scope="scope">
                <span class="redSpan">*</span>键值
              </span>
              <template slot-scope="scope">
                <el-form-item
                  :prop="'saveTabArr.' + scope.$index + '.catalogValue'"
                  :rules="[
                    {
                      required: true,
                      trigger: ['blur', 'change'],
                      message: '键值不能为空'
                    }
                  ]"
                >
                  <el-input
                    v-model.trim="scope.row.catalogValue"
                    :maxlength="200"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="60" align="center">
              <template slot-scope="scope">
                <xn-col-button
                  @click="delOne(scope.$index, scope.row)"
                  type="text"
                  size="small"
                  >删除</xn-col-button
                >
              </template>
            </el-table-column>
          </xn-table>
        </el-form>
        <el-form>
          <el-form-item>
            <div style="text-align: center">
              <el-button type="primary" @click="saveEnum">保存</el-button>
              <el-button type="primary" @click="backList">取消</el-button>
            </div>
          </el-form-item>
        </el-form>

然后data声明

```html
return {
      fristClassify: {
        value: ""
      },
      fristClassifyOption: [],
      secondClassify: {
        saveTabArr: []
      }
    };

保存的代码以下

let params = {
        secondCatalogs: "",
        typeKey: this.fristClassify.value,
        tableList: this.$refs.saveTab.$refs.table.data
      };
      this.$http
        .post("接口", params)
        .then(result => {
          if (result.resultcode == "0") {
            this.$message.success("保存成功");
            this.$closeTab();
          } else {
            this.$message.error("保存失败！请检查");
            // this.$closeTab();
          }
        })
        .catch(result => {
          this.$message.error("保存失败！请检查");
        });

```

Answer 1

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
你可以尝试在保存按钮的点击事件中添加一个判断，检查表格中是否有空值。如果有空值，则弹出提示并阻止提交。以下是修改后的代码：

<el-form :model="secondClassify" ref="secondClassify">
  <xn-table
    ref="saveTab"
    :data="secondClassify.saveTabArr"
    style="width: 98%"
    :showPagination="false"
  >
    <!-- ... -->
  </xn-table>
</el-form>
<el-form>
  <el-button type="primary" @click="saveEnum">保存</el-button>
  <el-button type="primary" @click="backList">取消</el-button>
</el-form>

methods: {
  saveEnum() {
    let hasEmptyValue = this.$refs.saveTab.$refs.table.data.some(row => {
      return row.catalogName === "" || row.catalogValue === "";
    });

    if (hasEmptyValue) {
      this.$message.warning("请检查表格中是否有空值");
      return;
    }

    let params = {
      secondCatalogs: "",
      typeKey: this.fristClassify.value,
      tableList: this.$refs.saveTab.$refs.table.data
    };
    this.$http
      .post("接口", params)
      .then(result => {
        if (result.resultcode == "0") {
          this.$message.success("保存成功");
          this.$closeTab();
        } else {
          this.$message.error("保存失败！请检查");
          // this.$closeTab();
        }
      })
      .catch(result => {
        this.$message.error("保存失败！请检查");
      });
  }
}

这样，在点击保存按钮时，会先检查表格中是否有空值，如果有空值，则弹出提示并阻止提交。

---

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢