Checkbox 多选框

规则

基础示例

const rule = {
    type:"checkbox",
    title:"标签",
    field:"label",
    value:["1","2","3"],
    options:[
        {value:"1",label:"好用",disabled:true},
        {value:"2",label:"方便",disabled:false},
        {value:"3",label:"实用",disabled:false},
        {value:"4",label:"有效",disabled:false},
    ]
}

Props 配置示例

按钮样式多选框

const rule = {
    type:"checkbox",
    title:"商品标签",
    field:"tags",
    value:["1","2"],
    options:[
        {value:"1",label:"热销"},
        {value:"2",label:"新品"},
        {value:"3",label:"推荐"},
        {value:"4",label:"限时"},
    ],
    props: {
        type: "button",
        size: "default",
    },
}

限制选择数量

const rule = {
    type:"checkbox",
    title:"商品分类",
    field:"categories",
    value:["1"],
    options:[
        {value:"1",label:"电子产品"},
        {value:"2",label:"服装配饰"},
        {value:"3",label:"家居用品"},
        {value:"4",label:"食品饮料"},
    ],
    props: {
        min: 1,
        max: 3,
    },
    validate:[
        { required: true, message: '请至少选择1个分类，最多选择3个', trigger: 'change' },
    ],
}

禁用状态

const rule = {
    type:"checkbox",
    title:"权限设置",
    field:"permissions",
    value:["1"],
    options:[
        {value:"1",label:"查看",disabled:false},
        {value:"2",label:"编辑",disabled:true},
        {value:"3",label:"删除",disabled:true},
    ],
    props: {
        disabled: false,
    },
}

Events 事件示例

监听选择变化

const rule = {
    type:"checkbox",
    title:"商品标签",
    field:"tags",
    value:["1"],
    options:[
        {value:"1",label:"热销"},
        {value:"2",label:"新品"},
        {value:"3",label:"推荐"},
    ],
    on: {
        change: (value) => {
            console.log('选择值改变:', value);
        },
    },
}

选择后联动更新

const rule = [
    {
        type:"checkbox",
        title:"商品标签",
        field:"tags",
        value:[],
        options:[
            {value:"1",label:"热销"},
            {value:"2",label:"新品"},
            {value:"3",label:"推荐"},
        ],
        inject: true,
        on: {
            change: ($inject, value) => {
                // 根据选择的标签数量，自动设置商品状态
                if (value.length >= 2) {
                    $inject.api.setValue('status', 'active');
                } else {
                    $inject.api.setValue('status', 'inactive');
                }
            },
        },
    },
    {
        type:"input",
        title:"商品状态",
        field:"status",
        props: {
            disabled: true,
        },
    },
]

完整配置项:Element_Checkbox

value :Array

Options

字段名	说明	字段类型	是否必填	默认值
value	参数值	String,Number	true	-
label	字段别名	String	true	-
disabled	设置为禁用状态	Boolean	false	false

Props

属性名	说明	类型	默认值
size	多选框组尺寸	enum	—
type	多选框类型	'button'| 'checkbox'	-
disabled	是否禁用	boolean	false
min	可被勾选的 checkbox 的最小数量	number	—
max	可被勾选的 checkbox 的最大数量	number	—
ariaLabel	原生 aria-label属性	string	—
textColor	当按钮为活跃状态时的字体颜色	string	#ffffff
fill	当按钮为活跃状态时的边框和背景颜色	string	#409eff
tag	复选框组元素标签	string	div
validateEvent	是否触发表单验证	boolean	true

Events

事件名	说明	类型
change	当绑定值变化时触发的事件	Function