<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>
