element radio选择显示隐藏select报错

251 阅读1分钟

radio选择通过或者拒绝,显示不同的select

来回切换的时候报错

image.png

解决方法

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>