TreeSelect 树选择

规则

基础示例

const rule = {
    type: "treeSelect",
    field: "treeSelect",
    title: "树选择",
    value: ["104","105"],
    props: {
        data:[
            {"value": "104", "label": "生态蔬菜", "disabled": false},
            {"value": "105", "label": "新鲜水果", "disabled": false},
        ],
        multiple: true
    },
}

Props 配置示例

单选树选择

const rule = {
    type: "treeSelect",
    field: "category",
    title: "商品分类",
    value: "104",
    props: {
        data: [
            {
                value: "1",
                label: "电子产品",
                children: [
                    { value: "11", label: "手机" },
                    { value: "12", label: "电脑" },
                ]
            },
            {
                value: "2",
                label: "服装配饰",
                children: [
                    { value: "21", label: "男装" },
                    { value: "22", label: "女装" },
                ]
            }
        ],
        placeholder: "请选择分类",
        clearable: true,
    },
}

多选树选择

const rule = {
    type: "treeSelect",
    field: "categories",
    title: "商品分类",
    value: ["104","105"],
    props: {
        data: [
            {
                value: "1",
                label: "电子产品",
                children: [
                    { value: "11", label: "手机" },
                    { value: "12", label: "电脑" },
                ]
            }
        ],
        multiple: true,
        placeholder: "请选择分类",
    },
}

Events 事件示例

监听选择变化

const rule = {
    type: "treeSelect",
    field: "category",
    title: "商品分类",
    props: {
        data: [
            {
                value: "1",
                label: "电子产品",
                children: [
                    { value: "11", label: "手机" },
                ]
            }
        ],
        placeholder: "请选择分类",
        clearable: true,
    },
    on: {
        change: (value, context) => {
            console.log('选择值改变:', value, context);
        },
        clear: () => {
            console.log('清空选择');
        },
    },
}

完整配置项:TDesign_Tree_Select