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

最新推荐文章于 2022-08-24 10:56:09 发布

转载

最新推荐文章于 2022-08-24 10:56:09 发布 · 4.9k 阅读

5 ·

CC 4.0 BY-SA版权

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

文章标签：

#javascript #ui #后端 #ViewUI

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

<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: [   //

最低0.47元/天解锁文章