el-table多行输入框设置提交非空校验

在Element UI的`el-table`内嵌输入框并实现校验，你可以按照以下步骤操作：

1. 定义表格结构[^1]：

<template>
  <el-form ref="formRef">
    <el-table :data="tableData">
      <el-table-column prop="displayCode" label="显示编号" v-model="form.displayCode" :rules="[{'required': true, 'message': '请输入显示编号', 'trigger': 'blur'}]" />
      <!-- 添加其他列 -->
    </el-table>
  </el-form>
</template>

这里我们使用`v-model`指令将输入框与`form`对象的相应字段关联起来，并设置了验证规则。

2. 初始化表单和数据：

data() {
  return {
    ...,
    form: {}, // 初始化一个空的对象来保存表单数据
    tableData: [
      { displayCode: '' } // 每一行的数据包括一个默认的空字符串
    ]
  };
},

注意，`form`对象应该初始化为空，以便在首次渲染时能正确地应用验证规则。

3. 表单验证：
当你需要提交表单时，可以使用`el-form`组件的方法，如`validate`和`resetFields`：

methods: {
  handleFormSubmit() {
    this.$refs.formRef.validate((valid) => {
      if (valid) {
        // 提交数据，假设你有一个异步请求接口
        this.submitFormData(this.form);
        // 或者清空输入框
        this.resetFields();
      } else {
        console.log('表单不合法');
      }
    });
  },
  resetFields() {
    this.form.displayCode = '';
    // 清空其他可能有错误的字段
  }
}

这里，`handleFormSubmit`函数会先验证表单是否有效，如果有效则提交数据，无效则返回提示。

4. 如果数据是从服务器动态加载的[^2]，那么可以在请求成功后更新`tableData`并同步到`prodList`，这样验证才会生效：

async fetchData() {
  const response = await yourApiRequest();
  this.tableData = response.data;
  this.prodList = response.data; // 更新 prodList
}
// 在适当的地方调用 fetchData()