vue elementui 动态获取数据 遍历循环 生成el-radio-group

单选

先看一下单选实际效果图 

 点击编辑图标显示

单选框实际上是比较简单的。由于很多数据是从数据库里取出来的。先看一下我存入的数据格式，为了方便操作，我是单选一张表，多选一张表，当然也可以放在一起，我是为了灵活多用，避免数据混淆，出现bug,说到底就是不做那么多判断，太麻烦了

<el-card class="boxs-card">
            <div slot="header" class="clearfix">
              <span>单选题</span>
              <el-button style="float: right; padding: 3px 2px;" type="text" @click="addDan()">新增</el-button>
            </div>
            <div class="not_eng_item" v-for="(item,index) in danarr" >
                <el-button type="primary" icon="el-icon-edit" circle @click="editedd(index)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="deletedd(index)"></el-button>
                <el-input v-model="item.title" placeholder="请输入内容" style="width:25%;" :readonly="shownput" clearable></el-input>
                <el-radio-group v-model="radioArray[index]" @change="onclick(index)">
                  <el-radio v-for="opt in danoptions[index]" border @change="handleRadioChanges(index,opt.label)" :key="opt.label" :label="opt.label">
                    {{opt.value}}
                  </el-radio>
                </el-radio-group>
            </div>
          </el-card>
data(){
  return{
     danarr:[],//所有题目的名称组装成一个对象数组，组装的数据格式会放在下面展示
     danoptions:[], //所有题目的对应的选项，组装成一个对象数组
     radioArray:[],//这个是必须的，你选中的每一题的数据都会存在这个数组里去，没有这个会有问题
     shoarr:[],//这个是事先命名的一个数组，因为有些人它有些题，他不确定，说的难听点：选择困难症，每个都点一下，这样会有大量数据，存到这个数组里进行去重操作(无论有多少数据，都以最后一个选择的为准)
      shownput:true,//这个数配合上面的只读属性，可根据自己的需要添加
  }
}
页面加载的时候就要开始向后台发送接口，然后从数据取里取数据组装数据格式,如下是我组装的（仅供参考）
danarr:[
          {text:'您的性别?',value:0},
          {text:'您的年龄?',value:1},
          {text:'您的受教育程度是?',value:2},
]
danoptions:[[
              {label:0,value:'男'},
              {label:1,value:'女'},
            ],[
              {label:0,value:'18岁以下'},
              {label:1,value:'18-24岁'},
              {label:2,value:'25-29岁'},
              {label:3,value:'30-39岁'},
              {label:4,value:'40-50岁'},
              {label:'5',value:'50岁以上'},
            ],[
              {label:0,value:'初中及以下'},
              {label:1,value:'高中'},
              {label:2,value:'大专'},
              {label:3,value:'本科'},
              {label:4,value:'硕士及以上'},
            ],
]

methods:{
   handleRadioChanges(index,strnum){//index,选中题目的下标，strnum你选中的那个选项，实际上也是个index
          let data = {name:0,val:0};
          data.name = index;
          data.val = parseInt(strnum);
          this.shoarr.push(data);//将我选中的哪一题，哪个选项存到实现准备好的数组shoarr
          let myarr=this.shoarr;
          for(var i=0;i<myarr.length;i++){
            for(var j=i+1;j<myarr.length;j++){
              if(myarr[i].name==myarr[j].name){
                myarr.splice(i,1);
                j--;
              }
            }
          }//数组去重，以最后一个选中为准
          this.shoarr=myarr;
        }
}
但是传到后台的时候是个字符串，所以需要对shoarr进行处理
let myarr=[];
   this.shoarr.forEach(function(item,i){
       myarr.push(item.val);
   })
myarr.join("");

至此单选基本上就完工了。数据是数据回显的话
无非就是把你数据库的值拼成一个数组返回给radioArray就好了

贴一段从后台获取list数据，组装数据格式的方法

_this.danarr.forEach(function(item,index){
              /*danNewArr=danNewArr.push(item.detail.split(','))*/
              _this.danNewArr.push(item.detail.split(','));
            })
            var arr1=[]
            for(var i=0;i<_this.danNewArr.length;i++){
              var arr=[]
              for(var j=0;j<_this.danNewArr[i].length;j++){
                var p={
                  label:j,
                  value:_this.danNewArr[i][j]
                }
                arr.push(p)
                _this.danNewStr.label=j;
                /*_this.danNewStr.value=_this.danNewStr[i][j];*/

              }
              arr1.push(arr)
              _this.danoptions=arr1;
            }
            /*radioArray danresult*/
            if(this.flags==1){
              let myarrq=this.danresult.split(",");
              let arrq=[];
              for(var o=0;o<myarrq.length;o++){
                arrq.push(parseInt(myarrq[o]))
              }
              this.radioArray=arrq;
            }//这个是数据回显的操作
          }