需求:存在多个分类,每个分类里有多个选项,选项之间单选
<el-card class="box-card">
<div class="filter-tree">
<div v-for="(item,index) in listData" :key="index" class="templateBox">
<el-card class="temCard box-card" style="box-shadow:none">
<div slot="header" class="header clearfix">
<i class="el-icon-caret-right" />
<span>{{ item[0].mainTagName }}</span>
</div>
<div>
<el-row :gutter="20">
<el-radio-group v-model="radioChooseArr[index]" class="radioGroup" @change="radioChange">
<el-col v-for="(item2,index2) in item" :key="index2" :span="8">
<div class="item">
<img style="height:80px;border:1px solid #ccc" :src="item2.data[0].tagPath" alt="">
<el-radio style="height:60px;line-height:60px;width:100%;" :label="item2.data[0].id">{{ item2.data[0].tagName }}</el-radio>
</div>
</el-col>
</el-radio-group>
</el-row>
</div>
</el-card>
</div>
</div>
</el-card>
<script>
export default {
data() {
return {
radioChooseArr: [],
listData: [],
list: []
}
},
created() {
this.getList()
},
methods: {
async getList() {
getTemplate().then(response => {
var arr = []
var data = response.data
for (var key in data) {
arr.push(data[key])
}
this.listData = arr
for (let i = 0; i < this.listData.length; i++) {
var ele01 = arr[i]
for (let j = 0; j < ele01.length; j++) {
var ele02 = ele01[j]
this.list.push.apply(this.list, ele02.data)
if (ele02.data[0].printIsDefault === 1) {
this.radioChooseArr.push(ele02.data[0].id)
}
}
}
setTimeout(() => {
this.listLoading = false
}, 1.5e3)
})
},
radioChange(e) {
console.log(e)
}
}
}
</script>
<style>
</style>
// 返回的数据格式如下
"data":{
"rfid":[{
"mainTagName":"RFID标签",
"mainTagKey":"rfid",
"data":[{"id":"10000","mainTagName":"RFID标签","mainTagKey":"rfid","tagName":"RFID标签
(80*40)","tagPath":"http://192.168.1.202:9000/filesUpload/rfidTag/RFID_580_300.png","tagTemplate/Path":"/nginx/html/filesUpload/report/template/RFID_580_300.jasper","tagSize":"80*40","printIsDefa/ult":0,"tagSr":"70","tagSc":"70"}]
}],
"putong":[{"mainTagName":"普通标签","mainTagKey":"putong",
"data":[{"id":"10002","mainTagName":"普通标签","mainTagKey":"putong","tagName":"普通(75*20)","tagPath":"http://192.168.1.202:9000/filesUpload/rfidTag/RFID_576_140.png","tagTemplatePath":"/nginx/html/filesUpload/report/template/RFID_576_140.jasper","tagSize":"75*20","printIsDefault":1,"tagSr":"5","tagSc":"40"}]
}]
}