Vue3+Element Plus 实现table表格中input的验证

实现效果

html部分

javascript 复制代码

<template>
  <div class="table">
    <el-form ref="tableFormRef" :model="form">
      <el-table :data="form.detailList">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="物资编号" align="center" prop="materialNo" />
        <el-table-column label="入库数量" align="center" prop="quantity" width="160">
          <template #default="scope">
            <el-form-item :prop="'detailList['+scope.$index+'].quantity'" :rules="tableFormRules.quantity">
              <el-input-number v-model="scope.row.quantity" placeholder="入库数量" :min="1" size="small"
                               :max="2147483647"></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="所属仓库" align="center" width="180">
          <template #default="scope">
            <el-form-item :prop="'detailList['+scope.$index+'].warehouseType'"
                          :rules="tableFormRules.warehouseType">
              <el-select v-model="scope.row.warehouseType" placeholder="请选择所属仓库">
                <el-option
                  v-for="dict in la_work_area"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="金额" align="center" width="160">
          <template #default="scope">
            <el-form-item :prop="'detailList['+scope.$index+'].money'" :rules="tableFormRules.money">
              <el-input-number v-model="scope.row.money" :precision="2" @change="changeMoney" size="small"
                               :min="0" placeholder="请输入金额"></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
  <div class="tc mt16">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="submitForm" type="primary" color="#67C23A">提交</el-button>
   </div>
</template>

数据部分

javascript 复制代码

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const buttonLoading = ref(false);
const tableFormRef = ref<ElFormInstance>();
const tableFormRules = reactive({
  quantity: [
    { required: true, message: "请输入数量", trigger: "change" }
  ],
  warehouseType: [
    { required: true, message: "请选择所属仓库", trigger: "change" }
  ],
  money: [
    { required: true, message: "请输入金额", trigger: "change" }
  ]
});


/** 提交按钮 */
const submitForm = () => {
 tableFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      //处理自己的业务逻辑
      proxy?.$modal.msgSuccess("操作成功");
      cancel();
    }
  });
};