编辑和详情共用有个页面,点击编辑查看时,如何回显value值

Question

问题遇到的现象和发生背景

编辑时 时下拉选择 绑定id值传入后台

现在出现问题 进入详情页面 查询出来的是id 所以给它赋值了

先在不希望出现这种情况 需要怎么解决

问题相关代码，请勿粘贴截图

这里是前台代码

<el-col :span="6">
                <el-form-item label="录用部门" size="small">
                    <el-select
                            v-model="memberParams.dept"
                            placeholder="请选择所属部门"
                            :disabled="seeDetail1">
                        <el-option
                            v-for="item in deptOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
              </el-form-item>
            </el-col>
            
            <el-col :span="6">
                <el-form-item label="录用岗位" prop="post" size="small">
                    <el-select class="filter-item" 
                    v-model="memberParams.post" 
                    placeholder="请选择录用岗位" 
                    size="small" 
                    :disabled="seeDetail1">
                        <el-option
                            v-for="item in postsOptions"
                            :key="item.postName"
                            :label="item.postName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>

运行结果及报错内容

我的解答思路和尝试过的方法

我之前的思路是在页面加载时 强行渲染 通过id值查询得到name值 直接给对应v-model赋值上
但是,若是没有编辑进行提交,那么强行渲染上的name值就会传入后台

我想要达到的结果

想要达到的结果就是 在页面加载是 下拉框就绑定了 带过来的id值 并将下拉框对应name值渲染在框内

Answer 1

编辑的时候，给postsOptions 这个数组添加默认值
this.postsOptions = [{postName: this.memberParams.名称, id: this.memberParams.post}]