TreeSelect Tree Selection

Rules

Basic Example

const rule = {
    type:"elTreeSelect",
    title:"Tree Selection",
    field:"treeSelect",
    value:[],
    props:{
        data:[{
            value: 'beijing',
            label: 'Beijing',
            children: [
                {
                    value: 'gugong',
                    label: 'Forbidden City'
                },
                {
                    value: 'tiantan',
                    label: 'Temple of Heaven'
                },
                {
                    value: 'wangfujing',
                    label: 'Wangfujing'
                }
            ]
        }, {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
                {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                        {
                            value: 'fuzimiao',
                            label: 'Confucius Temple',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    label: 'Suzhou',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            label: 'Humble Administrator\'s Garden',
                        },
                        {
                            value: 'shizilin',
                            label: 'Lion Grove Garden',
                        }
                    ]
                }
            ]
        }]
    }
}

Props Configuration Examples

Multiple Selection

const rule = {
    type:"elTreeSelect",
    title:"Product Category",
    field:"categories",
    value:[],
    props:{
        data:[{
            value: 'electronics',
            label: 'Electronics',
            children: [
                { value: 'phone', label: 'Phone' },
                { value: 'computer', label: 'Computer' },
            ]
        }],
        multiple: true,
        collapseTags: true,
        placeholder: "Select category",
    }
}

Searchable

const rule = {
    type:"elTreeSelect",
    title:"Location",
    field:"address",
    value:[],
    props:{
        data:[{
            value: 'beijing',
            label: 'Beijing',
            children: [
                { value: 'gugong', label: 'Forbidden City' },
            ]
        }],
        filterable: true,
        placeholder: "Select or search area",
    }
}

Show Checkbox

const rule = {
    type:"elTreeSelect",
    title:"Permission Selection",
    field:"permissions",
    value:[],
    props:{
        data:[{
            value: 'user',
            label: 'User Management',
            children: [
                { value: 'view', label: 'View' },
                { value: 'edit', label: 'Edit' },
            ]
        }],
        showCheckbox: true,
        multiple: true,
        placeholder: "Select permissions",
    }
}

Full configuration: Element_TreeSelect

value :Array

Props

Since this component is a combination of el-tree and el-select, their original attributes have not been changed, so they are not repeated here. Please refer to the corresponding documentation of the original components.

Attribute	Method	Event	Slot
tree	tree	tree	tree
select	select	select	select