表格表单校验table-input

最新推荐文章于 2025-10-23 16:53:52 发布

原创

最新推荐文章于 2025-10-23 16:53:52 发布 · 539 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #typescript

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

<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}} -->