Element-ui中的el-radio无法数据回显

这篇具有很好参考价值的文章主要介绍了Element-ui中的el-radio无法数据回显。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Element-ui中的el-radio无法数据回显

 1.这样写也可以回显,应该在<el-radio>中加不加v-model属性都不影响

<el-form-item prop="action" label="租/借">
    <el-radio-group v-model="form.action">
      <el-radio v-model="form.action" label="0">借</el-radio>
      <el-radio v-model="form.action" label="1">租</el-radio>
    </el-radio-group>
</el-form-item>

2.使用Element-ui版本 2.15.7 需要回显的代码

<el-form-item prop="action" label="租/借">
    <el-radio-group v-model="addModule.action">
         <el-radio  label="0">借</el-radio>
         <el-radio  label="1">租</el-radio>
    </el-radio-group>
</el-form-item>

在网上查了一下,由于我数据库中action字段的类型为int类型,而radio的值默认应该是string类型,所以radio不会默认选中。

解决办法就很多了,我是从后台拿到数据以后再把int转成String类型

//由于radio默认返回了String值,所以要把其转为int类型
      let action = row.action.toString();
      row.action = action;

3.el-radio值无法回显

1.先看lebel前有没有加冒号 : “:”

2.radio label为number类型可以直接回显

3.radio label为String类型无法回显,需要在最外层再加一层引号文章来源地址https://www.toymoban.com/news/detail-503720.html

<el-form-item label="是否固定推荐" prop="canRecommend" :label-width="formLabelWidth">
   <el-radio-group v-model="form.canRecommend">
      <el-radio :label="'1'">是</el-radio>
      <el-radio :label="'-1'">否</el-radio>
   </el-radio-group>
</el-form-item>
 

到了这里,关于Element-ui中的el-radio无法数据回显的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 使用element-ui中的el-table回显已选中数据时toggleRowSelection报错

    使用element-ui中的el-table回显已选中数据时toggleRowSelection报错

    最近在写一个后台,需要在表格中多选,然后点击编辑按钮的时候,需要回显已经选中的表单项 之前根据以上代码,就可以实现回显,但是这次没有,还报了一个错,报错如下 找了一下原因,这个回显是一个弹框,我在刚进页面就走了这部分逻辑,相当于在请求接口的时候

    2024年02月10日
    浏览(11)
  • el-radio单选框,取消选中

    1.背景:在公司开发需求中有一个选择颜色的单选框(黑色,白色),每种颜色选择后均支持取消选中,可是el-radio标签不支持取消选中。 2.解决: 方法1:  方法2:换checkbox,设置max=1即可

    2024年02月14日
    浏览(13)
  • Element-ui关于el-icon无法正常显示的问题(已解决)

    Element-ui关于el-icon无法正常显示的问题(已解决)

    在使用element-ui组件库的时候,使用自带的图标不显示,查了好多篇博客,都说是element-ui的版本老了,在package.json中修改版本重新安装就行,但是我的情况不是这样。 最后解决看了这篇博客: https://blog.csdn.net/weixin_44835957/article/details/115009973 要在 main.js 文件中引入图标的样式

    2024年02月11日
    浏览(31)
  • element-ui中的el-table合并单元格

    element-ui中的el-table合并单元格

    在写项目的时候有时候会经常遇到把行和列合并起来的情况,因为有些数据是重复渲染的,不合并行列会使表格看起来非常的混乱,如下:  而我们想要的数据是下面这种情况,将重复的行进行合并,使表格看起来简单明了,如下:   1:html部分 所谓的合并行就是将多行相同

    2024年02月10日
    浏览(16)
  • Unknown custom element: <el-image>无法使用该组件,升级element-ui版本后项目报错

    Unknown custom element: <el-image>无法使用该组件,升级element-ui版本后项目报错

    需求背景: 项目中需要使用图片点击放大,想要使用 el-image 组件,引入后报了下面的错,需要升级element版本,element-ui版本过低,没有该组件。 过程: cnpm i element-ui@2.14.1 --save-dev 升级后,页面报了一千多个错,如Property or method “__v_isRef“ is not defined on the instance 项目页面较

    2023年04月19日
    浏览(17)
  • element-template中的element-ui版本升级后不出现el的代码提示

    element-template中的element-ui版本升级后不出现el的代码提示

    在开发基于element-template的vue管理系统中,我需要使用到element-ui的描述列表,但是写入代码后没有相关样式。 经过查询资料后发现可能是由于element-ui的版本较低导致, 于是我更新了element-ui的版本至最新 ,然后就出现了该问题 在idea的vue文件中,打代码的时候没有element-ui的代

    2024年02月15日
    浏览(15)
  • 修改element-ui中的表格el-table的滚动条样式

    一.单独修改element-ui中的表格el-table的滚动条样式(两种方法) 1. 2.  二.保持整个页面的滚动条的风格是一致(直接改全局的滚动条样式) 三.页面内某一组件滚动条样式美化  scroll-bar是需要滚动条组件的元素,类名自定义

    2024年02月11日
    浏览(15)
  • element-ui中的el-table实现分页多选功能

    selection-change事件:当选择项发生变化时会触发该事件(当分页切换时,选中的数据都会自动清空) 链接: https://blog.csdn.net/qq_36157085/article/details/122922678

    2024年02月17日
    浏览(13)
  • el-radio编辑选不中和el-tree相关问题

    1.解决el-raido选不中的问题 2.el-tree复选框选中选中的id值 3.el-tree编辑复选框回显问题 4.el-dialog 弹出框在关闭后再打开rules验证的错误显示问题,加了一个v-if解决 5.el-table 显示树型数据,加tree-props=“{children:‘children’,hasChildren:‘hasChildren’}” 6.elementui刷新页面 7.el-table 复选框批

    2024年02月14日
    浏览(16)
  • 最简单 实现 Element-ui el-table的懒加载表格数据 el-table懒加载请求数据 element-ui 懒加载

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包