element的form表单校验数组处理_element表单中数组的非空校验

element的form表单校验数组处理
出现场景
form表单里有需要校验的是表格，数据是数组

解决思路
１添加隐藏的input，校验使用该隐藏的input绑定的校验，当表格数据有值后，给input赋值取消校验．

 <el-row :gutter="40">
        <el-col :span="24">
          <el-form-item label="测试表格"
                        prop="selectSum">
            <!-- 隐藏的input -->
            <el-input v-model="ruleForm.selectSum"
                      type="hidden"
                      class="LawTableInput"></el-input>
            <el-row>
            <!-- 表格 -->
              <AddPeopleReTable :orglawTable="peopleList"
                                @getLawTabel="getLawTabel"
                                :peopleData="peopleData"></AddPeopleReTable>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

扩展知识
type=“hidden”
定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值
２校验规则

rules: {
 selectSum: [
          { required: true, message: '请选择测试表格', trigger: 'change' }
        ],
        }
1
2
3
4
5

３input赋值

 if (this.peopleList && this.peopleList.length > 0) {
        this.ruleForm.selectSum = 999999;
      } else {
        this.ruleForm.selectSum = null;
      }
1
2
3
4
5
6

４加了隐藏的input导致增加按钮样式不对，修改隐藏的input

.LawTableInput {
  position: absolute;
}
1
2
3

5因为页面一进来，数组可能为空，会触发校验，所以进入是清空校验

 mounted () {
    this.$nextTick(() => {
      this.$refs['ruleForm'].clearValidate(['selectSum']);
    })
  },
1
2
3
4
5