element插件Descriptions中使用v-if的el-select插件出现值混乱

最新推荐文章于 2025-03-31 15:08:18 发布

原创最新推荐文章于 2025-03-31 15:08:18 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个在使用v-if时遇到的问题：页面中的性别选择框和下方的学历选择框显示不正常。通过为受影响的表单元素添加唯一key值的方式解决了该问题。

问题描述

使用v-if后，页面中的性别选择框和下方的学历选择框一致了
在这里插入图片描述

解决方法

在性别选框的<el-form-item>中添加:key=“Math.random()”

<template v-if="formData.idnotype > 1">
    <el-descriptions-item label-align="center" name="sex" label="性别" label-class-name="setred">
        <el-form-item prop="sex" :key="Math.random()">
            <el-select
                v-model="formData.sex"
                class="m-2"
                placeholder="请选择性别"
                size="large"
            >
                <el-option
                v-for="item1 in sexList"
                :key="item1.value"
                :label="item1.label"
                :value="item1.value"
                >
                </el-option>
            </el-select>
        </el-form-item>
    </el-descriptions-item>
 </template>