單選

先看一下單選實際效果圖 

 點選編輯圖示顯示

單選框實際上是比較簡單的。由於很多資料是從資料庫裡取出來的。先看一下我存入的資料格式，為了方便操作，我是單選一張表，多選一張表，當然也可以放在一起，我是為了靈活多用，避免資料混淆，出現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就好了