整删整改vue

超、凢脫俗 2022-11-07 05:25 81阅读 0赞

<template>
      <div>
        <p>radioArray：{
       {form.radioArray}}</p>
        <div v-for="(item,index) of list2" :key="index">
       
          <el-radio-group v-model="form.radioArray[index].checked">
            <el-radio v-for="it of item.list" :key="it.id" :label="it.id"  @change="handleRadioChanges(item,it.id, index)">
              {
       {it.anames}}
              <el-input v-show="it.id === 'other'" v-model="form.radioArray[index].value" :disabled="form.radioArray[index].checked !== it.id" />
            </el-radio>
          </el-radio-group>
        </div>
        结果：{
       {reslist}}
        <el-button @click="submit">提交</el-button>
      </div>
    </template>
    
    <script>
    export default {
        data() {
          return {
            form: {
              radioArray:[]
            },
            reslist: [],
            list2: [
              {
                id:'000',
                list: [
                    {id:'11', anames: '备选项1', pcStatus: null, value: ''},
                    {id:'12', anames: '备选项2', pcStatus: null, value: ''},
                    {id:'13', anames: '备选项3', pcStatus: null, value: ''},
                    {id:'other', anames: '其他', pcStatus: null, value: ''}
                  ]
              },
              {
                id:'001',
                list: [
                    {id:'14', anames: '备选项4', pcStatus: null, value: ''},
                    {id:'15', anames: '备选项5', pcStatus: null, value: ''},
                    {id:'16', anames: '备选项6', pcStatus: null, value: ''},
                    {id:'other', anames: '其他', pcStatus: 1, value: ''}
                  ]
              },
              {
                id:'002',
                list: [
                    {id:'11', anames: '备选项1', pcStatus: null, value: ''},
                    {id:'12', anames: '备选项2', pcStatus: null, value: ''},
                    {id:'13', anames: '备选项3', pcStatus: null, value: ''},
                    {id:'other', anames: '其他', pcStatus: null, value: ''}
                  ]
              }
              ]
          }
        },
        created() {
          this.handCheck()
        },
        methods: {// 赋值
        handCheck(){
          const aaa = []
          this.list2.forEach((item,index) => {
            item.list.forEach(it => {
                if(it.pcStatus === 1){
                  aaa.push(
                    {
                      checked: it.id,
                      value: it.value
                    }
                  )
                 }
              }) 
            if(aaa.length!==index+1){
              aaa.push(
                {
                  checked: null,
                  value: ''
                }
              )
            }
          })
          this.form.radioArray = aaa
        },
        // 取值
        handleRadioChanges(item, id, index) {
          if (id !== 'other') {
            this.form.radioArray[index].value = ''
          }
          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;
         },
         submit() {
           this.list2.forEach((res, index) => {
             res.list.map(item => {
               if (this.form.radioArray[index].checked  === item.id) {
                 item.value = this.form.radioArray[index].value
               }
             })
           })
           console.log(this.list2, '?????')
         }
        }
      }
    </script>
    <style lang="scss" scoped>
    </style>