表格表单校验table-input

本文详细介绍了如何在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;
        }

Element UI 的表格 (`el-table`) 中的输入校验通常是在配合 `el-form` 或 `el-input` 组件一起使用的。当在表格单元格内添加了 `el-input` 并需要验证用户输入时,你可以这样做: 1. 首先,在 `<el-form>` 组件里定义表单字段,并绑定到每个单元格的值上。例如,假设你有一个名为 `form` 的 Form 实例: ```html <template> <el-form ref="form" :model="formData"> <el-table :data="tableData"> <!-- ... --> <el-table-column prop="columnToValidate" label="验证列" align="center" scoped-slot="scope.row"> <el-input v-model="scope.row.columnToValidate" placeholder="请输入内容"></el-input> </el-table-column> <!-- ... --> </el-table> </el-form> </template> <script> export default { data() { return { formData: { // 这里存放表单数据,包括需要校验的字段 columnToValidate: &#39;&#39; }, tableData: [] // 表格数据 }; } }; </script> ``` 2. 然后,在表单的 `watch` 或者自定义事件处理器里添加输入校验规则。比如使用 Vue 的 `watch` 函数来监听字段变化并检查是否满足条件: ```javascript <script> //... methods: { handleValidation(value) { if (!value || value.length < 3) { this.$refs.form.validateField(&#39;columnToValidate&#39;, { valid: false }); } else { this.$refs.form.validateField(&#39;columnToValidate&#39;, { valid: true }); } } }, watch: { &#39;formData.columnToValidate&#39;: { immediate: true, handler(newValue) { this.handleValidation(newValue); } } } //... </script> ``` 在这个例子中,如果 `columnToValidate` 的长度小于 3,`validateField` 方法会将该字段标记为无效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值