记一次 element-plus el-radio 踩坑经历
需求:
对树结构进行子节点的添加,其中子节点可通过el-radio 来设置状态的启用/禁用 点击保存后 树结构数据新增一条数据
问题:
对新增/编辑状态 el-radio 都不为空 默认为启用状态 ,编辑是直接回显详情状态,但是都无选中效果,回显的默认值为null,在操作change事件时每项都是选中状态;
在本地环境开发正常,一旦上传dev/qa环境就会出现上述问题。
想要实现效果:
编码如下:
<el-dialog :model-value="props.dataDialog" class="pass-dialog" append-to-body :title="subDictKey.type == 'edit' ? '编辑字典' : '新增字典'" @close="handlerClose" width="480px"> <el-form ref="ruleFormRef" :model="formData" label-width="80px" :rules="rules"> <el-form-item label="字典名称" prop="dictLabel"> <el-input v-model="formData.dictLabel" placeholder="请输入字典名称" maxlength="20" show-word-limit /> </el-form-item> <el-form-item label="字典值" prop="dictValue"> <el-input v-model="formData.dictValue" placeholder="请输入字典值" /> </el-form-item> <el-form-item label="SN" prop="dictKey"> <el-input v-model="formData.dictKey" placeholder="请输入SN" :disabled="subDictKey.type == 'edit' ? true : false" /> </el-form-item> <el-form-item label="启用状态" prop="isDisable"> <el-radio-group v-model="formData.isDisable"> <el-radio v-for="item in statusList" :key="item.dictValue" :label="item.dictValue + 0" :value="item.dictValue + 0">{{ item.dictLabel }}</el-radio> </el-radio-group> </el-form-item> <el-form-item label="备注"> <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" /> </el-form-item> </el-form> <template #footer> <el-row class="dialog-footer"> <el-button @click="handlerSubmit">取消</el-button> <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button> </el-row> </template> </el-dialog>
重点:
v-for 渲染el-radio 将key、value、label 都赋值 并且将选中的value值做加法 强化数据类型 才生效
:key="item.dictValue" :label="item.dictValue + 0" :value="item.dictValue + 0"
但凡不加0 就无效果,但是在本地看不出差别!!
真的是一个大坑,找了很久的原因。声明:为防止数据类型不一致,我在父子组件传参时已将value 的类型转为Number 奈何还是无效。查阅全网
:value="item.dictValue *1 的写法 看着也是转换类型 就尝试+0 一次成功。。