el-form-item 循环+rules+checkbox多组 验证

在这里插入图片描述

<el-form ref="selectCheckboxForm" :model="selectCheckboxForm" class="w-p100" label-width="125px" label-position="left">
        <div class="flex1 jc-fs" v-for="(item,index) in ecologicalList" :key="index">
          <el-form-item :label="item.name+':'" :prop="item.name" class="m-r40" :rules="{required: true, message: '请至少勾选一个'+item.name}">
            <el-checkbox-group v-model="selectCheckboxForm[item.name]" @change="checkChange">
              <el-checkbox :label="items" v-for="items in item.arr" :key="items"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </el-form>
 // 渲染多选框数据
      ecologicalList: [
        {
          name: "技术属性", arr: ["工程技术", "生物技术", "农业技术", "管理技术", "综合技术",]
        },
        {
          name: "一级治理目的", arr: ["荒漠化治理", "石漠化治理", "水土流失治理"]
        },
        {
          name: "二级治理目的", arr: ["草场恢复", "沙丘固定", "边坡治理", "农田防护"]
        },
        {
          name: "典型生态脆弱区", arr: ["西北干旱荒漠区", "青藏高原高寒区", "黄土高原区", "西南岩溶区", "西南山地区", "西南干热河谷区", "北方沙化草地区"]
        },
        {
          name: "降水量", arr: ["0-50", "50-200", "200-400", "400-800", "800以上"]
        },
        {
          name: "气候类型", arr: ["温带季风性气候", "温带大陆性气候", "高原山地气候", "亚热带季风性气候", "热带季风性气候"]
        },
        {
          name: "地形", arr: ["平原", "山地", "丘陵", "高原", "盆地"]
        },
        {
          name: "地貌部位", arr: ["山顶", "山坡", "沟道", "陡坡", "缓坡"]
        },
        {
          name: "地类", arr: ["农地", "坡地", "林地", "草地", "荒地"]
        },
      ],
      selectCheckboxForm: {
        "技术属性": [],
        "一级治理目的": [],
        "二级治理目的": [],
        "典型生态脆弱区": [],
        "降水量": [],
        "气候类型": [],
        "地形": [],
        "地貌部位": [],
        "地类": [],
      },

版权声明:本文为josiecici原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。