自学内容网 自学内容网

Vue3中el-table中提交内容校验

这里只记录提交时,校验问题,显示输入不能为空,且除去非必填字段! 

// 提交
const handleSubmit  = () => {
    if (validateTable()) {
      // 所有行验证通过,执行提交逻辑
      const valuesData=tableData
      createHoursFill(valuesData.value)
        .then(res=>{
          if(true==res){
            emit("getSubmitData",'success')
            tableData.value=[]
            ElMessage.success("保存成功")
          }else {
            ElMessage.error(" ");
          }
        })
    } else {
      // 至少有一行数据为空,显示错误提示
      ElMessage.error('请填写完整信息.');
    }
};
//限制必填权限
const validateTable = () => {
  let isValid = true;
  tableData.value.forEach((row) => {
    const keys = Object.keys(row);
    for (const key of keys) {
      // 排除特定字段
      if (key !== 'remark') {
        // 确保值存在且不为空字符串(或根据需要调整校验逻辑)
        if (
          typeof row[key] === 'undefined' ||
          row[key] === null ||
          (typeof row[key] === 'string' && row[key].trim() === '')
        ) {
          isValid = false;
          break; // 一旦发现空值,停止当前行的循环
        }
      }
    }
  });
  return isValid;
};


原文地址:https://blog.csdn.net/weixin_58771326/article/details/140321188

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!