element-UI,根据后台数据、动态生成el-checkbox-group，点击提交获取绑定checked项以及实现显示默认checked项...

最新推荐文章于 2025-04-11 11:15:33 发布

爱不到要偷

最新推荐文章于 2025-04-11 11:15:33 发布

阅读量4.8k

点赞数

文章标签： javascript ui 后端 ViewUI

原文链接：http://www.cnblogs.com/wjunwei/p/9531322.html

版权

这篇博客介绍了如何根据后台数据动态创建el-checkbox-group，并实现显示默认选中的选项。通过创建二维数组来适配不同的数据格式，结合v-model实现双向数据绑定，以达到在用户提交时获取选中项的目的。参考代码适用于需要自定义数据格式的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="Demo">
    <el-form ref="form" label-width="100px">
      <el-form-item label="设备名称">
       <div
          class="check-group"
          v-for="(item, index) in equipments"
          :key="index">
          <el-tag>{
   {item.menu}}</el-tag>
          <el-checkbox-group
            v-model="checkedEquipments[index]"
            @change="handleChange(item.id)">
            {
    {checkedEquipments[index]}}
            <el-checkbox
              v-for="data in item.childMenu"
              :label="data.id"
              :key="data.menu">
              {
    {data.menu}}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
export default {
    data() {
      return {
        checkedEquipments: [], //随意修改后的checked项（即要传到后台的变更数据）
        equipments: [