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;
            }//這個是數據回顯的操作
          }