首页 > 其他分享 >记一次 el-ment plus el-radio 踩坑经历

记一次 el-ment plus el-radio 踩坑经历

时间:2024-04-12 14:11:25浏览次数:28  
标签:el 状态 ment value item dictValue plus 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 一次成功。。

标签:el,状态,ment,value,item,dictValue,plus,radio
From: https://www.cnblogs.com/zhu-xl/p/18131084

相关文章

  • Element中el-time-picer组件中value-format和format得区别
    value-format:它用于指定时间选择器的值的格式,即选择的时间的字符串格式。当用户选择时间后,组件会根据value-format的值将选择的时间转换成相应的字符串格式作为组件的值。这个属性一般用于和后端交互,将时间值以特定格式发送给服务器。format:它用于指定时间选择器的显示格式,即用......
  • 在Linux中, 什么是shell函数?如何使用它们?
    在Linux中,shell函数是一种在shell脚本中封装重复使用的代码片段的方法,用于提高代码的可读性和复用性。shell函数类似于其他编程语言中的函数概念,允许程序员定义一组指令序列,将其作为一个整体调用,并在需要的时候执行这些指令。1.定义shell函数的基本语法:有两种方式来定义shell函......
  • Linux云服务器文件删除恢复方法命令extundelete工具testdisk使用
    如果不小心删除了系统盘的文件,尤其是使用了rm-rf*,请立即停止对磁盘的写入,并且使用数据恢复软件进行恢复(下文有详细的步骤)。立即停止对磁盘的写入实际情况可能没那么容易。服务器可能是云服务器也可能是物理机,下面是可能的情况以及操作方法:1、云服务器:立即去控制台创建快照(防......
  • StringHelper--字符串左右添加指定字符
    StringHelper--字符串左右添加指定字符1usingSystem;2usingSystem.Collections.Generic;3usingSystem.Configuration;4usingSystem.Linq;5usingSystem.Text;6usingSystem.Threading.Tasks;78namespaceHRMessageApp.Helper9{10publiccla......
  • vmwar出现Could not open...Please make sure that the kernel modul的问题
    打开vmware出现提示框,显示如下内容,进不去虚拟机Couldnotopen/dev/vmmon:?????????.Pleasemakesurethatthekernelmodule`vmmon'isloaded.在终端输入命令sudo/etc/init.d/vmwarestart再打开虚拟机就能进去了。[wszzn@abc-pc~]$sudo/etc/init.d/vmwarestart......
  • Godot Label样式 Textrue纹理,实现样式修改,背景填充
    目录前言运行环境新建项目Style样式讲解StyleBoxEmpty:普通样式StyleBoxTexture:字体样式StyleBoxFlat:填充样式StyleBoxLine:行样式总结前言在Godot中,直接的BackGroud背景颜色这个属性。Godot中使用的是Textrue纹理这个属性来表示文本的信息运行环境Godot4.2.1Windows10......
  • 服务器确保已安装了 EPEL 软件源,依然无法安装 supervisor
    如果你已经安装了EPEL软件源但仍无法安装Supervisor,可能是因为Supervisor并不在EPEL软件源中。在这种情况下,你可以尝试通过Python的包管理工具pip来安装Supervisor。请按照以下步骤操作:确保已安装Python和pip。如果尚未安装,可以使用以下命令安装:sudoyuminstall......
  • shell practice 04
    #!/bin/bash#author:Chiweiming#version:v1#date:2024-03-26<<COMMAND检查某个目录下的所有文件和目录,看是否满足下面条件:1)所有文件权限为6442)所有目录权限为7553)文件和目录所有者为xxx,所属组为xxx如果不满足,改成符合要求注意:不要直接修改权限,一定要有判断的......
  • shell practice 05
    #/bin/bash#autuor:ChiWeiming#version:v1#date:2024-03-27<<COMMAND针对某个目录,该目录下有数百个子目录,比如/data/att/chiweiming/data/att/linux然后再深入一层是以日期命名的目录,比如/data/att/linux/20240324,每天都会生成一个日期新目录,由于磁盘空间快满了,......
  • Elastic学习之旅 (9) 结构化搜索
    大家好,我是Edison。上一篇:基于Term和全文的ES查询结构化数据结构化搜索(StructuredSearch)是指对结构化数据的搜索,那么,什么数据是结构化的呢?ES中日期、布尔类型和数字都是结构化的。另外,文本也可以是结构化的:比如彩色笔可以有离散的颜色集合:红、蓝、绿等;一个博客也可能......