radio选择通过或者拒绝,显示不同的select
来回切换的时候报错
解决方法
el-form-item增加一个key指定它的唯一性
vue会尽可能高效地渲染元素, 通常会复用已有元素而不是从头开始渲染
这样也不总是符合实际需求, 所以 Vue 为你提供了一种方式来声明 "这两个元素是完全独立的 -- 不要复用它们". 只需添加一个具有唯一值的 key 属性即可;
<el-form-item prop="status" label="选择">
<el-radio-group v-model="formData.status">
<el-radio :label="1">通过</el-radio>
<el-radio :label="-1">拒绝</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="formData.status === 1" :key="1" prop="appId" label="通过后">
<el-select v-model="formData.appId" placeholder="请选择">
<el-option
v-for="item in passOption"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item v-if="formData.status === -1" :key="2" prop="appId" label="拒绝后">
<el-select v-model="formData.appId" placeholder="请选择">
<el-option
v-for="item in rejectOption"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>