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

原创已于 2022-04-27 18:47:57 修改 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-04-27 18:47:07 首次发布

vue 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在使用Element-ui 2.15.7时，如何处理因数据库int类型与radio默认string类型冲突导致的 radio 选择不正确的问题，通过后台转换数据类型并提供两种代码实现方式来解决这个问题。

使用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;

在这里插入图片描述
PS：尝试了一下这种写也可以回显，应该在<el-radio>中加不加v-model属性都不影响

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