Radio 单选框

规则

基础示例

const rule = {
    type:"radio",
    title:"是否包邮",
    field:"is_postage",
    value:"0",
    options:[
        {value:"0",label:"不包邮",disabled:false},
        {value:"1",label:"包邮",disabled:true},
    ],
}

Props 配置示例

按钮样式

const rule = {
    type:"radio",
    title:"商品状态",
    field:"status",
    value:"1",
    options:[
        {value:"1",label:"上架"},
        {value:"2",label:"下架"},
        {value:"3",label:"待审核"},
    ],
    props: {
        variant: "default-filled",
        size: "small",
    }
}

禁用选项

const rule = {
    type:"radio",
    title:"支付方式",
    field:"payment",
    value:"1",
    options:[
        {value:"1",label:"在线支付",disabled:false},
        {value:"2",label:"货到付款",disabled:true},
        {value:"3",label:"余额支付",disabled:false},
    ],
}

Events 事件示例

监听选择变化

const rule = {
    type:"radio",
    title:"配送方式",
    field:"delivery",
    value:"1",
    options:[
        {value:"1",label:"快递配送"},
        {value:"2",label:"门店自提"},
        {value:"3",label:"同城配送"},
    ],
    on: {
        change: (value) => {
            console.log('选择值改变:', value);
        },
    },
}

选择后联动更新

const rule = [
    {
        type:"radio",
        title:"配送方式",
        field:"delivery",
        value:"1",
        options:[
            {value:"1",label:"快递配送"},
            {value:"2",label:"门店自提"},
            {value:"3",label:"同城配送"},
        ],
        inject: true,
        on: {
            change: ($inject, value) => {
                // 根据配送方式自动设置运费
                const freightMap = {
                    "1": 10,
                    "2": 0,
                    "3": 5,
                };
                $inject.api.setValue('freight', freightMap[value] || 0);
            },
        },
    },
    {
        type:"input-number",
        title:"运费",
        field:"freight",
        props: {
            disabled: true,
        },
    },
]

完整配置项:TDesign_Radio

value :String | Number