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

最新推荐文章于 2024-12-17 14:48:40 发布

星良辰寻

最新推荐文章于 2024-12-17 14:48:40 发布

阅读量2.2k

点赞数 2

分类专栏： element ui

本文链接：https://blog.csdn.net/josiecici/article/details/117334536

版权

element ui 专栏收录该内容

55 篇文章 4 订阅

订阅专栏

这篇博客展示了如何使用Vue.js实现一个生态治理技术选择的多选组件。内容涵盖技术属性、治理目的、生态脆弱区等多个分类，每个分类下包含多个可选项，通过el-checkbox-group和el-checkbox进行渲染，并设置了验证规则确保用户至少选择每个分类的一个选项。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<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: {
        "技术属性": [],
        "一级治理目的": [],
        "二级治理目的": [],
        "典型生态脆弱区": [],
        "降水量": [],
        "气候类型": [],
        "地形": [],
        "地貌部位": [],
        "地类": [],
      },