ElementUI中el-radio-group使用v-model绑定是属性为String字符串类型时不回显数据

场景

结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。

官方示例代码：

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio: 3
      };
    }
  }
</script>

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

按照上面官方的示例代码使用的时候，发现在编辑时获取数据后没法回显数据。

原因是示例代码中返回的数据绑定的radio是一个数组3,而在实际业务中绑定的属性是字符串“3”

 

 

所以需要在“”外面再加一层‘’

              <el-radio-group v-model="form.jxbclx" @change="$forceUpdate()" size="medium">
                <el-radio :label='"1"'>井下大班</el-radio>
                <el-radio :label='"2"'>井下小班</el-radio>
              </el-radio-group>

就能实现回显数据了。