element ui根据返回数据动态实现多项单选及回显

效果如下，数据都是接口返回的，

思路：

element-ui  的单选 <el-radio>标签，可通过 v-model 绑定变量来设置默认值，但上图这种效果，所有数据都是接口动态返回，不能预先在data中定义 每组单选 变量来设置默认值，

可在data中定义一个数组 qualitySelect，数据返回时，有几组数据向这个数组中push几个值，值为每组数据默认的选中值，注意，值必须为number类型，才会给 <el-radio>的v-model赋值上

<table>
    <tr v-for="(item,index) in qualityLabel" :key="index">
		<td>{{item.name}}</td>
		<td>
			<el-radio v-for="(option,idx) in item.labels" v-model="qualitySelect[index]" :label="option.id" :key="idx">{{option.value}}</el-radio>
		</td>
	</tr>
</table>

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