element 循环多个el-radio-group 如何取值赋值，element循环多组el-radio-group设置校验

element 循环多组el-radio-group如何赋值取值

最近在开发中遇见需要循环多组radio-group的情况，那么怎么让每组radio-group选中值互不影响呢？怎么取到每组选中的值呢？经过多次翻阅查找得出以下解决方案，

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.14.1/lib/index.js"></script>
<script src="//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循环多组el-radio-group设置校验

在以上基础上如果还需要设置校验，可以按以下依葫芦画瓢设置：

重点在于:prop="`radioArray.${index}`"这句，注意不要前面的form