动态循环的el-form做用户角色所属表单验证

 

上图我们只针对表格中某某部门的验证，form表单根据实际情况（后端返回数据中部门的个数）做动态渲染，这里注意form在for循环种嵌套，所以渲染结构必定有多个form，好在表单每一项的验证规则相同

1、后端数据结构

let evaluationQuery = 
{
    "code": 200,
    "success": true,
    "data": {
        "id": "1510177245100482561",
        "tenantId": "",
        "entId": "1506827625228644354",
        "type": 2,
        "status": 1,
        "score": -1,
        "projectName": "项目名称",
        "projectBegin": "2021-04-02 00:00:00",
        "projectEnd": "2022-04-02 00:00:00",
        "createUser": -1,
        "createUserName": "",
        "createTime": "",
        "updateTime": "",
        "contents": [
            {
                "id": "1510177245134036994",
                "tenantId": "000000",
                "entId": "1506827625228644354",
                "evaluationId": "1510177245100482561",
                "deptId": "1506475214370418689",
                "deptName": "生产技术部",
                "weights": 0.5,
                "type": 0,
                "score": -1,
                "content": "",
                "createUser": "1505844651900948481",
                "createUserName": "李三",
                "createTime": "2022-04-02 16:42:11",
                "updateTime": "2022-04-02 16:42:11"
            },
            {
                "id": "1510177245159202818",
                "tenantId": "000000",
                "entId": "1506827625228644354",
                "evaluationId": "1510177245100482561",
                "deptId": "1506475471086989314",
                "deptName": "市场营销部",
                "weights": 0.5,
                "type": 0,
                "score": -1,
                "content": "",
                "createUser": "1505844651900948481",
                "createUserName": "李三",
                "createTime": "2022-04-02 16:42:11",
                "updateTime": "2022-04-02 16:42:11"
            }
        ]
    },
    "msg": "操作成功"
}

 evaluationQuery.contents为部门数据，提交表单入参格式与之相同，所以直接双向绑定拿来用

<tr v-for="(item,index) in evaluationQuery.contents" :key="item.id">
                  <td>{{item.deptName}}</td>
                  <td class="department" colspan=3>

                    <el-form :model="item" :rules="rules" ref="ruleForm">
                        <div class="Conent">
                          <el-form-item prop="type">
                            <el-select :disabled='userInfo.dept_id !== item.deptId' v-model="item.type" placeholder="请选择评价分类">
                              <!-- disabled如果该部门与用户是同一个部门 -->
                              <el-option
                                  v-for="item in evaluationType"
                                  :key="item.dictValue"
                                  :label="item.dictValue"
                                  :value="item.dictKey">
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item prop="score">
                            <el-input validate-event :disabled='userInfo.dept_id !== item.deptId' v-model="item.score" placeholder="请输入评分,不超过100分"></el-input>
                          </el-form-item>
                        </div>
                      <el-form-item prop="content">
                        <el-input
                          :disabled='userInfo.dept_id !== item.deptId'
                          type="textarea"
                          placeholder="请输入评论内容"
                          v-model="item.content"
                          maxlength="1000"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          show-word-limit
                          >
                        </el-input>
                      </el-form-item>
                    </el-form>
                  </td>
              </tr>

 经过遍历得到多组from表单，如下图，此时所有表单ref值都相同,也就是说如果现在log得到一数组

console.log(this.$refs.ruleForm);
//结果为数组，长度为3

此时已不能使用原本的this.$refs.ruleForm.validate((valid) => { })去做验证，因为这里我们只验证登录用户user所属部门，假如用户属于企业管理部，那么只校验他对应的表单内容，其他的也是不可编辑的，这是我们通过用户的userInfo信息中所属部门id与后端相应数据中的部门id进行匹配，得到该部门ref表单的索引index，最终写为this.$refs.ruleForm[索引值].validate((valid) => { })去做单一表单验证

假如某一用户存在多个部门，这里方法暂不适用