解决ElementUI el-radio标签回显失败问题

小咪咪 2022-12-21 02:25 807阅读 0赞

## 1.问题描述： ##

**修改页面radio控件数据回显出现问题：**

![在这里插入图片描述][20201113165140375.png_pic_center]  
**但是后台接口没有问题，权限值能够拿到并打印出来：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70_pic_center]  
**前端radio控件页面：**

<el-form-item label="访问权限：" label-width="34%">
           <el-col :span="12">
                <el-radio v-model="updateFormData.studyNote.accessAuthority" label="0">任何人可见</el-radio>
                <el-radio v-model="updateFormData.studyNote.accessAuthority" label="2">任课教师可见</el-radio>
          </el-col>
          <el-col :span="12">
               <el-radio v-model="updateFormData.studyNote.accessAuthority" label="1">任课教师和同班同学可见</el-radio>
               <el-radio v-model="updateFormData.studyNote.accessAuthority" label="3">仅自己可见</el-radio>
          </el-col>       
     </el-form-item>

## 2.问题解决 ##

**经过一段时间寻找解决办法后，发现radio的值应该是string类型，而我们后台返回的是int类型，所以我们需要在前端页面做一个处理，将该属性转换成string类型的。**

**我们可以在接口调用的时候使用toString()方法来进行转换：**

![在这里插入图片描述][20201113170155938.png_pic_center]

**转换后前端打印值变为字符串：**

![在这里插入图片描述][20201113170354856.png_pic_center]

[20201113165140375.png_pic_center]: /images/20221120/4d6fdc46ba024633adfad7cd1da332ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ecc299a0a9774458a5720c59ad2b0f7d.png
[20201113170155938.png_pic_center]: /images/20221120/58a54960284a46cb8154e797a1db9c01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/c999fa25c57341ed82ddc24ea50b283d.png
[20201113170354856.png_pic_center]: /images/20221120/9a9d85ca8e7747d7a2d11aebfd726bcf.png