记一次 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 一次成功。。
posted @ 2024-04-12 14:11  巫小婆  阅读(67)  评论(0编辑  收藏  举报