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

实现效果

html部分

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

 数据部分

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();}});
};