vue+elementui 動態獲取資料 便利迴圈 生成el-radio-group
阿新 • • 發佈:2018-11-29
單選
先看一下單選實際效果圖
點選編輯圖示顯示
單選框實際上是比較簡單的。由於很多資料是從資料庫裡取出來的。先看一下我存入的資料格式,為了方便操作,我是單選一張表,多選一張表,當然也可以放在一起,我是為了靈活多用,避免資料混淆,出現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就好了