编辑画面，element-ui的单选框组选中值以及画面选择样式无法切换，但是绑定的v-model值已发生变化

今天碰到了一个特别奇葩的问题，使用element-ui的单选框组做选择，在新增的情况下，也就是form表单绑定的对象为空时，画面可以正常操作取出来的值也没有问题，但是在编辑的情况下，也就是form表单绑定的对象为前一画面选择的数据时，单选框组居然出了不能切换选中状态的情况，我通过【change】方法监听发现，绑定的model数据值已经变化为我要选中的数值，但是单选框组选中的值一直都是组件加载时我赋的前页面传过来的数据，因此猜测问题可能出现在了数据传输部分，便使用了【JSON.parse】和【JSON.stringify】做了双向转换，具体的实现方法可以参照下面的代码例子，如果下次再碰到类似选中的问题也可以尝试这个方法，感觉这是element-ui的一个问题吧，可能以后会有所改进，大家一起进步吧~~

<template>
  <el-dialog :title="dialogTitle" :visible.sync="visible" @close="dialogCancle" :close-on-click-modal="false" width="400px" :modal-append-to-body="false" :append-to-body="true">
    <el-form ref="siteInfo" size="small" :model="siteInfo" :rules="rules" label-width="100px">
      <el-form-item label="级别" prop="level">
          <el-radio-group v-model="siteInfo.level" @change="handleChange">
              <el-radio v-for="item in siteLevels" :label="item.value" :key="item.value">{{item.name}}</el-radio>
          </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogCancle" size="small">取 消</el-button>
      <el-button type="primary" @click="checkedSubmit" size="small" :loading="loadingFlg">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {updateSite} from "@/api/siteApi";
export default {
  name: "siteManage_edit_dialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    operationType: {
        type: ''
    },
    siteData: {
      type: Object
    },
  },
  data() {
    return {
      // 是否加载
      loadingFlg: false,
      // 级别
      siteLevels:this.$store.state.basic.siteLevel,
      visible:false,
      siteInfo:{
        level:null,
      },
      rules: {
        level: [{ required: true, message: "请选择级别", trigger: "blur" }]
      },
    };
  },
  watch: {
    dialogVisible(val) {
      this.visible = this.dialogVisible;
      if(val){
        if(this.operationType == 'line') {
            this.siteInfo = JSON.parse(JSON.stringify(this.siteData));
        } else {
            this.siteInfo = {};
        }
      }
    },
  },
  computed: {
    dialogTitle() {
      return "测试";
    }
  },
  methods: {
    handleChange(value){
      console.log("value",value,this.siteLevels,this.siteInfo)
    },
    //提交站点信息
    checkedSubmit() {
      this.$refs.siteInfo.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {}).catch(() => {});
        }
      });
    },
    //关闭弹窗
    dialogCancle() {
      this.visible = false;
      this.$emit("dialogCancle", false);
    }
  }
};
</script>
<style scoped>
</style>