vue 表单验证,表格刷新问题

发布于:2023-01-21 ⋅ 阅读:(576) ⋅ 点赞:(0)

1.表格数据更新,页面不更新处理: 

(1) this.$set(row, row.children, (row.children = row.children));

(注意:上面是改变了children,实际情况改变的哪个属性,就写啥)
  (2) this.tableData = JSON.parse(JSON.stringify(this.tableData));

2.表单验证以及刷新问题

(1).this.$refs.ruleForm.resetFields(); // 重置关闭所有校验 会清除填写内容(一般在退出当前页面或者是才加载页面时使用)

(2)this.$refs.ruleForm.validateField("barCode");单独校验barCode, this.rules.barCode= [{ required: true, message: '请上传图片' }]

(推荐:)或者在表单项<el-form-item label="评价颗粒度:" prop="keLiDuValue" size="small">写prop属性,表单rules配置  <el-form :model="ruleForm" :rules="rules" label-width="220px" ref="ruleForm">

rules: {

        keLiDuValue: [

          { required: true, message: "请选择评价颗粒度", trigger: "change" }

        ],}

(3)this.$refs.ruleForm.clearValidate('barCode');//强制取消barCode这一项的校验

触发对整个表单的校验: this.$refs.queryForm.validate();

(4)注意:表单校验还不生效时,可以配置:error属性,手动触发, <el-form-item :error="punishSubjectError">

 data中自行定义errorMsg: {},

 if (this.ruleForm.subjectLinkList.length == 0) {

        this.errorMsg = { punishSubjectError: "请添加处罚主体。" };

        return;

      }

最后注意:当表单一进入页面就发生校验时:检查prop属性配置值是否与rules中一致,特别是检查为select中v-model的初始值(null或undefine或者空字符串啥的)是否与接口获取的值为空时对其赋值一致,这种情况常常是接口数据为空,给其从新赋值与初始值不一致造成的。


网站公告

今日签到

点亮在社区的每一天
去签到