项目中的编辑问题

因为项目中有很多功能，都是通过id获取，所以遇到了坑
一、如图所示，下拉框显示id或者空白

解决后的，主要问题出在 ‘:value="item.unid"‘这里  原来给的是和key值一致导致内容无法显示
<el-form-item label="教室" prop="classroom_id">
                    <el-select v-model="addClassForm.classroom_id" placeholder="请选择教室" clearable filterable allow-create default-first-option>
                      <el-option v-for="(item,i) in classroomShuzu" :key="i" :label="item.classroom_name" :value="item.unid" />
                    </el-select>
                </el-form-item>

二、修改学期时，发现时间不随学期变化
修改之前

修改之后

对比发现时间没有变化
解决办法：

HTML
<el-form-item label="学期" prop="semester_id">
                    <el-select v-model="addClassForm.semester_id" placeholder="请选择学期" clearable filterable allow-create default-first-option @change="Selectxueqi">
                      <el-option v-for="(item,i) in semeteShuzu" :key="i" :label="item.semester_name" :value="item.unid" />
                    </el-select>
                </el-form-item>
js
// 通过学期获取时间
        Selectxueqi(){
          const rs = this.semeteShuzu.find(item => item.unid === this.addClassForm.semester_id)
            this.addClassForm.begin_time = rs.start_time
            this.addClassForm.end_time = rs.end_time
        },

最终效果图：可以看到时间不同

三、当添加和修改即所谓的编辑使用同一个弹框时，修改数据后，点击添加数据仍然存在，并没有随着确定或者取消按钮清空下拉框`
原因：点击编辑 再点击添加，这时候数据已经赋值了， 所以this.$refs[formName].resetFields()，无法把数据重置为空[] 这肯定不是我们想要的结果
解决办法：验证数据时添加change事件 例如：

 day: [{
                    required: true,
                    message: '请输入日期',
                    //在此处添加change
                    **trigger: 'blur,change' ,**
                }],

还有一种办法就是：通过循环，把form 里面的每个属性值清空，这样打开就会变成一个空的表单了

/添加用户
addBtn(){
  this.dialogVisible=true
  this.messages="添加";
  this.isEditStreet=false
  this.$nextTick(function(){
    this.$refs['form'].clearValidate()
  })
  //这里是使用for in 循环的方法来清空
  for(let key in this.form){
    this.form[key]=""
  }
},

四、当两个添加页面选择同一个字段时，名字无法渲染
如图所示：

新增弹框中的教室 v-model="addClassForm.classroom_id双向绑定是addclassForm
<el-form-item label="教室" prop="classroom_id">
                    <el-select v-model="addClassForm.classroom_id" placeholder="请选择教室" clearable filterable allow-create default-first-option>
                      <el-option v-for="(item,i) in classroomShuzu" :key="i" :label="item.classroom_name" :value="item.unid" />
                    </el-select>
                </el-form-item>
新增嵌套上课时间弹框的教室 v-model="addDateForm.classroom_id双向绑定是addDateForm
<el-form-item label="教室" prop="classroom_id">
                    <el-select v-model="addDateForm.classroom_id" placeholder="请选择教室" clearable filterable allow-create default-first-option>
                      <el-option v-for="(item,i) in classroomShuzu" :key="i" :label="item.classroom_name" :value="item.unid" />
                    </el-select>
                </el-form-item>              

原因：因为双向绑定不一样，所以无法一致，但是当他们的双向绑定一致时，发现上课时间的表单如图所示，没有渲染
解决办法：谁有解决办法可以发出来