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

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

element ui根据返回数据动态实现多项单选及回显_第1张图片

思路:

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

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

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

 

 

你可能感兴趣的:(前端,vue,elementui)