element- UI checkbox与后端的动态交互

最近在做公司的一个项目用到了element UI的checkbox这块东西，单纯的去使用没什么难度，但是问题是后边的红色部分的选项是由后端生成的，是否被选中也是由后端来决定的，我想就如何实现这个效果进行一个思路总结

思路分为这样：

（1）拿到后端所提供的所有选择项，便利循环选择项

（2）拿到后端选择的内容

(3)两个数组双重循环，对总的选择项中被选择到的选项添加一个新的属性checked

// 硬件循环
row.hardwareModelVOs.map((v) => {
  this.hardwareModel.map((item) => {
    if (v.id == item.id) {
    	item.checked = true
    }
  })
})

（4）el-checkbox循环生成，checked属性进行动态绑定

 <!-- 硬件型号选择 -->
      <div style="display:flex;flex-wrap: wrap;margin-top:20px;">
        <p style="flex: 1 0 20%;margin-top:1px;">硬件型号:</p>
        <div style="flex: 1 0 80%;">
          <el-checkbox-group v-model="checkeHardware"  @change="handleCheckedCitiesChange" style="display:flex;flex-wrap: wrap;flex-direction: row;justify-content: space-between;">
            <div>
              <el-checkbox style="flex: 1 0 50%;" v-for="hardware in hardwareModel"
              :label="hardware" :key="hardware" :checked="hardware.checked">{{hardware.model}}</el-checkbox>
            </div>
            
          </el-checkbox-group>
        </div>
      </div>

这是处理的思路。