element ui根据返回数据动态实现多项单选及回显
效果如下，数据都是接口返回的，
思路：
element-ui 的单选
可在data中定义一个数组 qualitySelect，数据返回时，有几组数据向这个数组中push几个值，值为每组数据默认的选中值，注意，值必须为number类型，才会给
{{item.name}}
{{option.value}}
data() {
return {
qualityLabel: [], // 数据
qualityOption: [], // 分组名，对应表格第一列
qualitySelect: [] // 默认选中值
}
}// 接口返回
...
this.qualityLabel = list.label; // 赋值
list.quality_label.forEach(item => {
this.qualityOption.push(item.name); // 向表头填数据
this.qualitySelect.push(Number(item.is_checked)); // 存储回显数据
});
..."list": {
"label": [
{
"name": "画面",
"typeId": 1,
"labels": [
{
"id": 1,
"value": "高清",
"checked": ""
},
{
"id": 2,
"value": "普通",
"checked": ""
},
{
"id": 3,
"value": "抖动",
"checked": ""
},
{
"id": 4,
"value": "模糊",
"checked": ""
}
],
"is_checked": 0
},
{
"name": "场景画风",
"typeId": 2,
"labels": [
{
"id": 5,
"value": "高级",
"checked": ""
},
{
"id": 6,
"value": "日常",
"checked": ""
},
{
"id": 7,
"value": "土味",
"checked": ""
}
],
"is_checked": 0
},
{
"name": "内容画风",
"typeId": 3,
"labels": [
{
"id": 8,
"value": "无问题",
"checked": ""
},
{
"id": 9,
"value": "字幕缺失",
"checked": ""
},
{
"id": 10,
"value": "字幕排版杂乱",
"checked": ""
},
{
"id": 11,
"value": "标题党",
"checked": ""
},
{
"id": 12,
"value": "感官不适",
"checked": ""
}
],
"is_checked": 0
},
{
"name": "音质",
"typeId": 4,
"labels": [
{
"id": 13,
"value": "高",
"checked": ""
},
{
"id": 14,
"value": "低",
"checked": ""
}
],
"is_checked": 0
},
{
"name": "泛低俗",
"typeId": 5,
"labels": [
{
"id": 15,
"value": "0级",
"checked": ""
},
{
"id": 16,
"value": "1级",
"checked": ""
},
{
"id": 17,
"value": "2级",
"checked": ""
},
{
"id": 18,
"value": "3级",
"checked": ""
}
],
"is_checked": 0
},
{
"name": "内容可看性",
"typeId": 6,
"labels": [
{
"id": 19,
"value": "高",
"checked": ""
},
{
"id": 20,
"value": "中",
"checked": ""
},
{
"id": 21,
"value": "略枯燥",
"checked": ""
},
{
"id": 22,
"value": "低",
"checked": ""
}
],
"is_checked": 0
},
{
"name": "情绪",
"typeId": 7,
"labels": [
{
"id": 23,
"value": "正",
"checked": ""
},
{
"id": 24,
"value": "中",
"checked": ""
},
{
"id": 25,
"value": "反",
"checked": ""
}
],
"is_checked": 0
}
]
}