el-form循环遍历list数据，进行回显，并进行校验保存

<template>
  <div class="app-container" style="padding: 0;">
    <el-card style="background:#eff3f6">
      <!-- #eff3f6 -->
      <el-form v-for=" (item,index) in listData" :key="index" :model="item" :ref="'formData'+index" :rules="rules" label-width="150px" class="demo-ruleForm" style="margin-bottom:20px;background:#fff;">
        <el-row style="padding-top: 14px;">
          <el-col :span="12">
            <el-form-item label="人员姓名 :" prop="name">
              {
    
    {
    
    item.name}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领域 :" prop="busiArea" :rules="rules.busiArea">
              <el-select v-model="item.busiArea" clearable placeholder="请选择" style="width:100%">
                <el-option v-for="item in businessAreasList" :key="item.id" :label="item.dictLabel" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="学习数量 :" prop="studyNum">
              {
    
    {
    
    item.studyNum}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="background:#fff;padding:20px 0;text-align:right;">
        <el-button @click="saveForm" type="primary">保存</el-button>
        <el-button @click="goBack">取消</el-button>
      </div>

    </el-card>
  </div>
</template>

<script>
import {
    
     dictionaries, businessDictionaries, parseTime } from "@/utils";
import {
    
      UserCreate, getComplianceListCount,} from "../../../api/people.js";

export default {
    
    
  data() {
    
    
    return {
    
    
      rules: {
    
    
        busiArea: [
          {
    
     required: true, message: '请选择', trigger: 'blur' },
        ],
      },
      businessAreasList: [],//业务领域
      listData: [],
    };
  },
  created() {
    
    
    let that = this;
    businessDictionaries(that, "businessAreasList", "business_areas");

    console.log("this.$route.query", this.$route.query.selectList);
    this.listData= JSON.parse(JSON.stringify(this.$route.query.selectList))

    this.listData= [
      {
    
    
        name : "张三",
        busiArea : "111",
      },
      {
    
    
        name : "张三1",
        busiArea : "222",
      },
      {
    
    
        name : "张三3",
        busiArea : "444",
      },
    ]
  },
  methods: {
    
    
    saveForm() {
    
    
      let number = 0
      for (const k in this.$refs) {
    
    
        this.$refs[k][0].validate((valid) => {
    
    
          if (valid) {
    
    
            number++
          } else {
    
    
            console.log("error submit!!");
            return false;
          }
        });
      }
      if (number == Object.keys(this.$refs).length) {
    
    
        let params = JSON.parse(JSON.stringify(this.listData))
        if (params.length > 0) {
    
    
          params.forEach((item) => {
    
    
            item.positionName = item.positionName.join(",")
          })
        }
        UserCreate(params)
          .then((res) => {
    
    
            console.log(res);
            if (res.code == 200) {
    
    
              this.$message({
    
    
                type: "success",
                message: "保存成功！",
              });
              this.$router.go(-1);
            }
          })
          .catch((err) => {
    
    
            // this.$message.error("保存失败！");
          });
      }
    },
    goBack() {
    
    
      this.$router.go(-1)
    },
    // 选择岗位
    positionNameChange(row, index) {
    
    
      if (row.positionName.length == 0) {
    
    
        this.$set(this.listData[index], 'studyNum', 0)
        return
      }
      getComplianceListCount(row.positionName)
        .then((res) => {
    
    
          console.log(res);
          if (res.code == 200) {
    
    
            this.$set(this.listData[index], 'studyNum', res.data)
          }
        })
        .catch((err) => {
    
    
        });
    },
  },
};
</script>
<style>
</style>