如图所示,选择分管领导的时候,因为分管领导的数据是根据牵头部门变换的,然而vue无法监听动态新增的属性的变化,所以选择牵头部门后再选择分管领导会出现选中但是不显示的情况

            <el-form-item label="牵头部门" prop="groupDept">
              <treeselect
                class="inline-input"
                v-model="addForm.groupDept"
                :options="deptOptions"
                :normalizer="normalizer"
                :show-count="true"
                @change="chooseMember"         //选择后获取分管领导列表
                placeholder="请选择牵头部门"
              />
            </el-form-item>
            <el-form-item label="分管领导" prop="groupUser">
              <el-select
                class="inline-select"
                v-model="addForm.groupUser"   //绑定的数据
                @change="pickChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in leaderOptions"  //动态获取的分管领导列表
                  :key="item.value+''"
                  :label="item.label"
                  :value="item.value+''"
                />
              </el-select>
            </el-form-item>

解决方案

  1.  .将绑定的数据addForm.groupUser更换绑定为groupUser,调接口的时候进行单独赋值
  2. 使用$set进行赋值,即可更改页面显示
      pickChange(val){
          this.$set(this.addForm,this.addForm.groupUser,val)
        },

Logo

前往低代码交流专区

更多推荐