Tree 树形组件

规则

基础示例

const rule = {
    type:"tree",
    title:"权限",
    field:"rule",
    value:[],
    props:{
        data:[],
        keys: {
            value: 'id',
            label: 'title',
            children: 'children'
        }
    }
}

Props 配置示例

可勾选树

const rule = {
    type:"tree",
    title:"权限选择",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                value: 1,
                label: '用户管理',
                children: [
                    { value: 11, label: '查看用户' },
                    { value: 12, label: '编辑用户' },
                ]
            },
            {
                value: 2,
                label: '系统设置',
                children: [
                    { value: 21, label: '基础设置' },
                    { value: 22, label: '高级设置' },
                ]
            }
        ],
        checkable: true,
        checkStrictly: false,
    }
}

可选中树

const rule = {
    type:"tree",
    title:"菜单选择",
    field:"menu",
    value:[],
    props:{
        data: [
            {
                value: 1,
                label: '首页',
            },
            {
                value: 2,
                label: '系统管理',
                children: [
                    { value: 21, label: '用户管理' },
                    { value: 22, label: '角色管理' },
                ]
            }
        ],
        activable: true,
        multiple: true,
    }
}

默认展开全部

const rule = {
    type:"tree",
    title:"权限选择",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                value: 1,
                label: '用户管理',
                children: [
                    { value: 11, label: '查看用户' },
                ]
            }
        ],
        checkable: true,
        expandAll: true,
    }
}

Events 事件示例

监听勾选和选中变化

const rule = {
    type:"tree",
    title:"权限选择",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                value: 1,
                label: '用户管理',
                children: [
                    { value: 11, label: '查看用户' },
                ]
            }
        ],
        checkable: true,
    },
    on: {
        change: (value, context) => {
            console.log('勾选节点改变:', value, context);
        },
        active: (value, context) => {
            console.log('选中节点改变:', value, context);
        },
        expand: (value, context) => {
            console.log('展开节点改变:', value, context);
        },
    },
}

勾选后统计权限数量

const rule = [
    {
        type:"tree",
        title:"权限选择",
        field:"permissions",
        value:[],
        props:{
            data: [
                {
                    value: 1,
                    label: '用户管理',
                    children: [
                        { value: 11, label: '查看用户' },
                        { value: 12, label: '编辑用户' },
                    ]
                }
            ],
            checkable: true,
        },
        inject: true,
        on: {
            change: ($inject, value) => {
                // 统计已选权限数量
                $inject.api.setValue('permissionCount', value.length);
            },
        },
    },
    {
        type:"input",
        field:"permissionCount",
        title:"已选权限数",
        props: {
            disabled: true,
        },
    },
]

完整配置项:TDesign_Tree

value :Array