avue中：单选框、复选框、下拉框多选

最新推荐文章于 2024-06-13 15:09:17 发布

张文博5005

最新推荐文章于 2024-06-13 15:09:17 发布

阅读量4.9k

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_53815644/article/details/125143273

版权

本文介绍了前端开发中三种常见的表单组件——单选框、复选框和下拉框的实现，特别是在多选模式下，利用字典接口动态加载选项。每个组件的示例代码展示了如何通过`dicUrl`获取字典数据，以及如何设置`props`来绑定显示值和实际值。这些组件在数据验证和用户交互中扮演着关键角色。

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

单选框、复选框、下拉框、下拉多选框，都需要使用字典进行选择框中值的定义

1.单选框

{
            label: "风险类型",
            type: "radio",     //单选框
            dicUrl: "/api/blade-system/dict/dictionary?code=risk_type",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            slot: true,
            prop: "riskType",
            rules: [
              {
                required: true,
                message: "请输入风险类型",
                trigger: "blur",
              },
            ],
          },

效果图：

2.复选框：

{
            label: "风险类型",
            type: "checkbox",   //复选框
            dicUrl: "/api/blade-system/dict/dictionary?code=risk_type",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            slot: true,
            prop: "riskType",
            rules: [
              {
                required: true,
                message: "请输入风险类型",
                trigger: "blur",
              },
            ],
          },

效果图：

3.下拉框多选

{
            label: "风险类型",
            type: "select",   //下拉框类型
            multiple: true,   //将可选变为多选
            dicUrl: "/api/blade-system/dict/dictionary?code=risk_type",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            slot: true,
            prop: "riskType",
            rules: [
              {
                required: true,
                message: "请输入风险类型",
                trigger: "blur",
              },
            ],
          },

效果图：