element表单和vxe表单联动校验的实现

今天也要晒太阳4732026-01-16 15:18

vxetable表单编辑列全局校验 表单的结构如下

js 复制代码

<el-form
        :model="ruleForm"
        :disabled="method == 'view'"
        :loading="loading"
        ref="ruleForm"
        class="info-form"
        size="mini"
      >
        <vxe-table
          style="width: 100%"
          border
          align="center"
          resizable
          show-overflow
          :data="ruleForm.planRoadfList"
          :edit-config="{
            trigger: 'dblclick',
            mode: 'row',
            beforeEditMethod: () => method != 'view',
            showStatus: true,  // 显示校验报错
          }"
          ref="rev_vxeTable1"
          :edit-rules="{ // 对表格中的编辑数据进行校验
            name: [
              { required: true, message: '名字必须填写' },
            ],

          }"
        >
        
        </vxe-table></el-form
      >

父组件内调用提交按钮时进行校验:

js 复制代码

this.$refs["form" + this.currentNodeId].$refs["ruleForm"].validate(
        async (valid1) => {
          console.log('valid1', valid1)
          if (valid1) {
            console.log('第一层校验通过')
            if(this.currentNodeId == '23'){ 
            // rev_vxeTable1被ruleForm包裹需要手动触发vxe校验 
              const errMap = await this.$refs["form" + this.currentNodeId].$refs["rev_vxeTable1"].validate(true)
              // 设置为true是校验整个表格的所有行、所有字段，vxe表单内全局校验
              // 会遍历data中的每一行，
              // 对每一行中配置了 `editRules` 的字段都执行校验。
              console.log('errMap', errMap, Object.prototype.toString.call(errMap))
              // 可以查看未通过校验的信息和errMap结构
              if (errMap) {
                console.error('信息没填完')
                return this.$message.warning('请完善填写信息');

              } else {
                console.log('vxe校验通过')
                提交逻辑