表格表单校验table-input_vue3 table input 校验-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42103673/article/details/127086479

本文详细介绍了如何在Vue.js中使用el-form和el-table组件动态绑定prop属性以及设置验证规则。通过`tableDataInput`和`ruleFormRef`实现了表格内的数据编辑，并使用`formRules`对象定义了校验规则，例如`nowGoalValue`字段的必填和数值格式验证。示例代码展示了如何在`v-if`条件下根据条件展示输入框或显示已有值，以及如何调用validate方法进行表单验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form :model="tableDataInput" ref="ruleFormRef">
      <el-table ref="multipleTableRef" v-loading="loading" :data="tableDataInput.tableData" :border="true"
        :header-cell-style="{ 'background-color': '#f2f2f2', color: '#737373' }" max-height="calc(100vh - 330px)"
        :span-method="objectOneMethod">
        <template v-for="item in column">
          <el-table-column :property="item.property" :label="item.label" :width="item.width ?? ''"
            :align="item.align ?? 'left'" :show-overflow-tooltip="true" :resizable="false">
            <template #default="scope">
              <!-- {{scope.row}} -->
              <template v-if="showType=='add'&&item.property=='nowGoalValue'">
                <el-form-item :prop="`tableData.${scope.$index}.${[item.property]}`" :rules="formRules[item.property]">
                <!-- {{formRules.nowGoalValue}} -->
                <!-- {{scope.row[item.property]}} -->
                  <el-input size="small" v-show="item.property=='nowGoalValue'" v-model="scope.row[item.property]" 
                    :type="item.type"></el-input>
                </el-form-item>
              </template>
              <span v-else>{{ scope.row[item.property] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-form>

要点就是在循环时动态绑定prop和校验规则：

:prop="`tableData.${scope.$index}.${[item.property]}`"

:rules="formRules[item.property]"

const formRules = reactive({
      nowGoalValue: [fv.isRequired({ msg: '请输入指标值' }), validatorNumberOrDot()],

    })


 try {
          console.log(ruleFormRef.value.validate())
          const valid = await ruleFormRef.value.validate();
          console.log(valid)

          if (valid) {
           ...
          }
        } catch (error) {
          return error;
        }