element 循環(huán)多組el-radio-group如何賦值取值

最近在開發(fā)中遇見需要循環(huán)多組radio-group的情況，那么怎么讓每組radio-group選中值互不影響呢？怎么取到每組選中的值呢？經過多次翻閱查找得出以下解決方案，

<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
<script src="http://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<div id="app">
<template>
  <div>
    <p>radioArray：{{form.radioArray}}</p>
    <div v-for="(item,index) of list2" :key="index">
   
      <el-radio-group v-model="form.radioArray[index]">
        <el-radio v-for="it of item.list" :key="it.id" :label="it.id"  @change="handleRadioChanges(item,it.id)">
          {{it.anames}}
        </el-radio>
      </el-radio-group>
    </div>
    結果：{{reslist}}
  </div>
</template>
</div>

var Main = {
    data () {
      return {
        form: {
          radioArray:[]
        },
        reslist: [],
        list2: [
          {
            id:'000',
            list: [
                {id:'11', anames: '備選項1', pcStatus: null},
                {id:'12', anames: '備選項2', pcStatus: null},
                {id:'13', anames: '備選項3', pcStatus: null}
              ]
          },
          {
            id:'001',
            list: [
                {id:'14', anames: '備選項4', pcStatus: 1},
                {id:'15', anames: '備選項5', pcStatus: null},
                {id:'16', anames: '備選項6', pcStatus: null}
              ]
          },
          {
            id:'002',
            list: [
                {id:'11', anames: '備選項1', pcStatus: null},
                {id:'12', anames: '備選項2', pcStatus: null},
                {id:'13', anames: '備選項3', pcStatus: null}
              ]
          }
         ]
      };
    },
  created () {
    this.handCheck()
  },
  methods:{
//賦值
    handCheck(){
      const aaa = []
      this.list2.forEach((item,index) => {
        item.list.forEach(it => {
            if(it.pcStatus === 1){
              aaa.push(it.id)
             }
          }) 
        if(aaa.length!==index+1){
          aaa.push(null)
        }
      })
      this.form.radioArray = aaa
    },
// 取值
    handleRadioChanges(item, id) {
      this.writeText2 = item
      this.writeText3 = id
      item.list.forEach(res => {
        if(res.id === id){
          res.pcStatus = 1 
        }else {
          res.pcStatus = 0
        }
      })
      this.reslist.push(item)
      let newArry=this.reslist;
      //數組去重選擇最后一條數據
          for(var i=0;i<newArry.length;i++){
            for(var j=i+1;j<newArry.length;j++){
              if(newArry[i].id==newArry[j].id){
                newArry.splice(i,1);
                j--;
              }
            }
          } 
          this.reslist=newArry;
     }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

效果圖如下：每一行就是一組radio-group
具體代碼鏈接codepen

element循環(huán)多組el-radio-group設置校驗

在以上基礎上如果還需要設置校驗，可以按以下依葫蘆畫瓢設置：