TreeSelect 树形选择

规则

基础示例

const rule = {
    type:"elTreeSelect",
    title:"树形选择",
    field:"treeSelect",
    value:[],
    props:{
        data:[{
            value: 'beijing',
            label: '北京',
            children: [
                {
                    value: 'gugong',
                    label: '故宫'
                },
                {
                    value: 'tiantan',
                    label: '天坛'
                },
                {
                    value: 'wangfujing',
                    label: '王府井'
                }
            ]
        }, {
            value: 'jiangsu',
            label: '江苏',
            children: [
                {
                    value: 'nanjing',
                    label: '南京',
                    children: [
                        {
                            value: 'fuzimiao',
                            label: '夫子庙',
                        }
                    ]
                },
                {
                    value: 'suzhou',
                    label: '苏州',
                    children: [
                        {
                            value: 'zhuozhengyuan',
                            label: '拙政园',
                        },
                        {
                            value: 'shizilin',
                            label: '狮子林',
                        }
                    ]
                }
            ]
        }]
    }
}

Props 配置示例

多选

const rule = {
    type:"elTreeSelect",
    title:"商品分类",
    field:"categories",
    value:[],
    props:{
        data:[{
            value: 'electronics',
            label: '电子产品',
            children: [
                { value: 'phone', label: '手机' },
                { value: 'computer', label: '电脑' },
            ]
        }],
        multiple: true,
        collapseTags: true,
        placeholder: "请选择分类",
    }
}

可搜索

const rule = {
    type:"elTreeSelect",
    title:"所在区域",
    field:"address",
    value:[],
    props:{
        data:[{
            value: 'beijing',
            label: '北京',
            children: [
                { value: 'gugong', label: '故宫' },
            ]
        }],
        filterable: true,
        placeholder: "请选择或搜索区域",
    }
}

显示复选框

const rule = {
    type:"elTreeSelect",
    title:"权限选择",
    field:"permissions",
    value:[],
    props:{
        data:[{
            value: 'user',
            label: '用户管理',
            children: [
                { value: 'view', label: '查看' },
                { value: 'edit', label: '编辑' },
            ]
        }],
        showCheckbox: true,
        multiple: true,
        placeholder: "请选择权限",
    }
}

完整配置项:Element_TreeSelect

value :Array

Props

由于这个组件是el-tree和el-select的结合体，他们的原始属性未被更改，故不在此重复。请跳转查看原组件的相应文档。

属性	方法	事件	插槽
tree	tree	tree	tree
select	select	select	select