三维数组

偏执的太偏执、 2022-11-07 13:26 167阅读 0赞

<template>
      <div>
        <div v-for="(item,index) of list2" :key="index">
          <div>{
       { item.ContentText }}</div>
          <div v-for="it in item.Items" :key="it.Id">
            <div>{
       { it.ItemText }}</div>
            <el-radio-group v-model="it.value">
              <el-radio v-for="op of it.DetectRsts" :key="op.Id" :label="op.Id" @change="$forceUpdate()">
                {
       {op.DictValue}}
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <el-button @click="submit">提交</el-button>
      </div>
    </template>
    
    <script>
    export default {
        data() {
          return {
            list2: [
              {
                ContentKey: '1',
                ContentText: '(一)关于物理隔离',
                Items: [
                  {
                    Id: '1-1',
                    ItemText: '问题一',
                    SortNo: 1,
                    DetectRsts: [
                      {
                        Checked: 0,
                        DictKey: '1',
                        DictValue: '是',
                        Id: '1',
                        Sort: 1,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '2',
                        DictValue: '否',
                        Id: '2',
                        Sort: 2,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '3',
                        DictValue: '不确定',
                        Id: '3',
                        Sort: 3,
                        value: null
                      }
                    ]
                  },
                  {
                    Id: '1-2',
                    ItemText: '问题二',
                    SortNo: 2,
                    DetectRsts: [
                      {
                        Checked: 0,
                        DictKey: '1',
                        DictValue: '是',
                        Id: '1',
                        Sort: 1,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '2',
                        DictValue: '否',
                        Id: '2',
                        Sort: 2,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '3',
                        DictValue: '不确定',
                        Id: '3',
                        Sort: 3,
                        value: null
                      }
                    ]
                  },
                  {
                    Id: '1-3',
                    ItemText: '问题三',
                    SortNo: 3,
                    DetectRsts: [
                      {
                        Checked: 0,
                        DictKey: '1',
                        DictValue: '是',
                        Id: '1',
                        Sort: 1,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '2',
                        DictValue: '否',
                        Id: '2',
                        Sort: 2,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '3',
                        DictValue: '不确定',
                        Id: '3',
                        Sort: 3,
                        value: null
                      }
                    ]
                  }
                ]
              },
              {
                ContentKey: '2',
                ContentText: '(二)关于化学隔离',
                Items: [
                  {
                    Id: '2-1',
                    ItemText: '问题一',
                    SortNo: 1,
                    DetectRsts: [
                      {
                        Checked: 0,
                        DictKey: '1',
                        DictValue: '是',
                        Id: '1',
                        Sort: 1,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '2',
                        DictValue: '否',
                        Id: '2',
                        Sort: 2,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '3',
                        DictValue: '不确定',
                        Id: '3',
                        Sort: 3,
                        value: null
                      }
                    ]
                  },
                  {
                    Id: '2-2',
                    ItemText: '问题二',
                    SortNo: 2,
                    DetectRsts: [
                      {
                        Checked: 0,
                        DictKey: '1',
                        DictValue: '是',
                        Id: '1',
                        Sort: 1,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '2',
                        DictValue: '否',
                        Id: '2',
                        Sort: 2,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '3',
                        DictValue: '不确定',
                        Id: '3',
                        Sort: 3,
                        value: null
                      }
                    ]
                  },
                  {
                    Id: '2-3',
                    ItemText: '问题三',
                    SortNo: 3,
                    DetectRsts: [
                      {
                        Checked: 0,
                        DictKey: '1',
                        DictValue: '是',
                        Id: '1',
                        Sort: 1,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '2',
                        DictValue: '否',
                        Id: '2',
                        Sort: 2,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '3',
                        DictValue: '不确定',
                        Id: '3',
                        Sort: 3,
                        value: null
                      }
                    ]
                  }
                ]
              },
              {
                ContentKey: '3',
                ContentText: '(三)关于物理化学隔离',
                Items: [
                  {
                    Id: '3-1',
                    ItemText: '问题一',
                    SortNo: 1,
                    DetectRsts: [
                      {
                        Checked: 0,
                        DictKey: '1',
                        DictValue: '是',
                        Id: '1',
                        Sort: 1,
                        value: null
                      },
                      {
                        Checked: 1,
                        DictKey: '2',
                        DictValue: '否',
                        Id: '2',
                        Sort: 2,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '3',
                        DictValue: '不确定',
                        Id: '3',
                        Sort: 3,
                        value: null
                      }
                    ]
                  },
                  {
                    Id: '3-2',
                    ItemText: '问题二',
                    SortNo: 2,
                    DetectRsts: [
                      {
                        Checked: 1,
                        DictKey: '1',
                        DictValue: '是',
                        Id: '1',
                        Sort: 1,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '2',
                        DictValue: '否',
                        Id: '2',
                        Sort: 2,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '3',
                        DictValue: '不确定',
                        Id: '3',
                        Sort: 3,
                        value: null
                      }
                    ]
                  },
                  {
                    Id: '3-3',
                    ItemText: '问题三',
                    SortNo: 3,
                    DetectRsts: [
                      {
                        Checked: 0,
                        DictKey: '1',
                        DictValue: '是',
                        Id: '1',
                        Sort: 1,
                        value: null
                      },
                      {
                        Checked: 0,
                        DictKey: '2',
                        DictValue: '否',
                        Id: '2',
                        Sort: 2,
                        value: null
                      },
                      {
                        Checked: 1,
                        DictKey: '3',
                        DictValue: '不确定',
                        Id: '3',
                        Sort: 3,
                        value: null
                      }
                    ]
                  }
                ]
              },
            ]
          }
        },
        created() {
          this.initData()
        },
        methods: {
          initData() {
            this.list2.map(res => {
              res.Items.map(item => {
                item.value = ''
                item.DetectRsts.map(el => {
                  if ( el.Checked) {
                    item.value = el.Id
                  }
                })
              })
            })
          },
          submit() {
            this.list2.map(res => {
              res.Items.map(item => {
                item.DetectRsts.map(el => {
                  if (item.value === el.Id) {
                    el.Checked = 1
                  } else {
                    el.Checked = 0
                  }
                })
              })
            })
            console.log(this.list2)
          }
        }
      }
    </script>
    <style lang="scss" scoped>
    </style>

<el-radio v-for="op of it.DetectRsts" :key="op.Id" :label="op.Id" @change="$forceUpdate()">