擴展！vue+element 循環獲取 form表單內容，並判斷格式，另：附上裏面select格式

在form表單裏包含一個select選擇框，並需在編輯時驗證並回顯，附上代碼如下：

template：isAdd==true時爲添加,list1.isRequired==1爲非必填，

<div v-if="isAdd==true" v-for="(list1,key) in form.lists">
          <el-form-item v-if="list1.isRequired==0" :label="list1.name+'：'" :prop="'lists.' + key + '.value'"
            :rules="[{required: true, message:'請選擇', trigger: 'change'}]">
            <el-select v-model="list1.value" style="width: 250px">
              <el-option v-for="list in list1.valueList" :key="list.id" :label="list.value" :value="list.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="list1.isRequired==1" :label="list1.name+'：'">
            <el-select v-model="list1.value" style="width: 250px">
              <el-option v-for="list in list1.valueList" :key="list.id" :label="list.value" :value="list.id">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-if="isAdd==false" v-for="(list1,key) in form.lists">
          <el-form-item v-if="list1.isRequired==0" :label="list1.name+'：'" required>
            <el-select v-model="list1.value" style="width: 250px" @change="change()">
              <el-option v-for="list in list1.valueList" :key="list.id" :label="list.value" :value="list.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="list1.isRequired==1" :label="list1.name+'：'">
            <el-select v-model="list1.value" style="width: 250px" @change="change()">
              <el-option v-for="list in list1.valueList" :key="list.id" :label="list.value" :value="list.id">
              </el-option>
            </el-select>
          </el-form-item>
        </div>

data:

data() {
      return {
        MonitorItem_page: false,
        isAdd: false,
        form: {
          number: "",
          name: "",
          unit: "",
          lists: [],
        },
        rules: {
          number: [{
            required: true,
            message: '請輸入監測項目編號',
            trigger: 'blur'
          }],
          name: [{
              required: true,
              message: '請輸入監測項目名稱',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '長度在 1 到 50 個字符',
              trigger: 'blur'
            }
          ],
          unit: [{
              required: true,
              message: '請輸入監測項目單位',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '長度在 1 到 50 個字符',
              trigger: 'blur'
            }
          ],
        },
        id: '',
      };
    },

methods:

//很重要！！！強制更新select當前選擇的內容 
change(){
      this.$forceUpdate()
      },
 addItemShow2(row, titleData) {
        this.titleName = '編輯監測項';
        this.MonitorItem_page = true;
        this.isAdd = false;
        this.id = row.f_id;
        this.form.number = row.f_number;
        this.form.name = row.f_name;
        this.form.unit = row.f_unit;
        this.form.lists = titleData; //接口返回數組
        // this.$nextTick(()=>{      //本來想用他加載的，但是發現當前值只能強制更新
        this.getAllDatas();          //判斷當前值的回顯內容
          //  });
//蝦米看不懂，大神來
 getAllDatas() {
        monitorItemPropertyInfo(this.id).then(response => {
            if (response.data.code == 0) {
              var data1 = response.data.data;
                for (var key in this.form.lists) {
                 for (var i in data1) {
                  if (data1[i].name == this.form.lists[key].name) {
                    this.form.lists[key].value = data1[i].value
                    this.$forceUpdate()    //強制更新
                  }
                }
              }
            } else if (response.data.code !== 0) {
              this.$message.error(response.data.msg);
            }
          })
          .catch(err => {
            this.$message.error('系統錯誤');
          });
      },

效果圖，拿走不謝！