TreeSelect 树选择

# TreeSelect 树选择

# 概述

树型选择控件，与 Select 类似，它的可选择数据结构是一个树形结构（Tree）。
该组件支持 Form 校验。

# 代码示例

基本用法

最简单的用法，单选。

请选择

<template>
    <TreeSelect v-model="value" :data="data" v-width="200" />
</template>
<script>
    export default {
        data () {
            return {
                value: '',
                data: [
                    {
                        title: 'parent1',
                        expand: true,
                        value: 'parent1',
                        selected: false,
                        checked: false,
                        children: [
                            {
                                title: 'parent 1-1',
                                expand: true,
                                value: 'parent1-1',
                                selected: false,
                                checked: false,
                                children: [
                                    {
                                        title: 'leaf 1-1-1',
                                        value: 'leaf1',
                                        selected: false,
                                        checked: false,
                                    },
                                    {
                                        title: 'leaf 1-1-2',
                                        value: 'leaf2',
                                        selected: false,
                                        checked: false,
                                    }
                                ]
                            },
                            {
                                title: 'parent 1-2',
                                expand: true,
                                value: 'parent1-2',
                                selected: false,
                                checked: false,
                                children: [
                                    {
                                        title: 'leaf 1-2-1',
                                        value: 'leaf3',
                                        selected: false,
                                        checked: false,
                                    },
                                    {
                                        title: 'leaf 1-2-1',
                                        value: 'leaf4',
                                        selected: false,
                                        checked: false,
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        }
    }
</script>

Copy

多选

设置属性 multiple 可以开启多选的树选择。

请选择

<template>
    <TreeSelect v-model="value" :data="data" v-width="200" />
</template>
<script>
    export default {
        data () {
            return {
                value: '',
                data: [
                    {
                        title: 'parent1',
                        expand: true,
                        value: 'parent1',
                        selected: false,
                        checked: false,
                        children: [
                            {
                                title: 'parent 1-1',
                                expand: true,
                                value: 'parent1-1',
                                selected: false,
                                checked: false,
                                children: [
                                    {
                                        title: 'leaf 1-1-1',
                                        value: 'leaf1',
                                        selected: false,
                                        checked: false,
                                    },
                                    {
                                        title: 'leaf 1-1-2',
                                        value: 'leaf2',
                                        selected: false,
                                        checked: false,
                                    }
                                ]
                            },
                            {
                                title: 'parent 1-2',
                                expand: true,
                                value: 'parent1-2',
                                selected: false,
                                checked: false,
                                children: [
                                    {
                                        title: 'leaf 1-2-1',
                                        value: 'leaf3',
                                        selected: false,
                                        checked: false,
                                    },
                                    {
                                        title: 'leaf 1-2-1',
                                        value: 'leaf4',
                                        selected: false,
                                        checked: false,
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        }
    }
</script>

Copy

可勾选

设置属性 show-checkbox 可以对数据勾选，使用勾选必须开启属性 multiple。

<template>
    <TreeSelect v-model="value" multiple show-checkbox :data="data" v-width="400" />
</template>
<script>
    export default {
        data () {
            return {
                value: [],
                data: [
                    {
                        title: 'parent1',
                        expand: true,
                        value: 'parent1',
                        selected: false,
                        checked: false,
                        children: [
                            {
                                title: 'parent 1-1',
                                expand: true,
                                value: 'parent1-1',
                                selected: false,
                                checked: false,
                                children: [
                                    {
                                        title: 'leaf 1-1-1',
                                        value: 'leaf1',
                                        selected: false,
                                        checked: false,
                                    },
                                    {
                                        title: 'leaf 1-1-2',
                                        value: 'leaf2',
                                        selected: false,
                                        checked: false,
                                    }
                                ]
                            },
                            {
                                title: 'parent 1-2',
                                expand: true,
                                value: 'parent1-2',
                                selected: false,
                                checked: false,
                                children: [
                                    {
                                        title: 'leaf 1-2-1',
                                        value: 'leaf3',
                                        selected: false,
                                        checked: false,
                                    },
                                    {
                                        title: 'leaf 1-2-1',
                                        value: 'leaf4',
                                        selected: false,
                                        checked: false,
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        }
    }
</script>

Copy

异步加载子节点

设置属性 load-data 可以异步加载子节点，与 iView Tree 的异步加载子节点方式相同。

请选择

<template>
    <TreeSelect v-model="value" multiple show-checkbox :load-data="loadData" :data="data" v-width="400" />
</template>
<script>
    export default {
        data () {
            return {
                value: [],
                nextValue: 1,
                data: [
                    {
                        title: 'parent1',
                        value: 'parent1',
                        loading: false,
                        selected: false,
                        checked: false,
                        children: []
                    }
                ]
            }
        },
        methods: {
            loadData (item, callback) {
                this.nextValue++;
                setTimeout(() => {
                    const data = [
                        {
                            title: 'children' + this.nextValue,
                            value: 'children' + this.nextValue,
                            loading: false,
                            selected: false,
                            checked: false,
                            children: []
                        }
                    ];
                    callback(data);
                }, 1000);
            }
        }
    }
</script>

Copy

# API

# TreeSelect props

属性	说明	类型	默认值
value	指定选中项目的 value 值，可以使用 v-model 双向绑定数据。单选时只接受 String 或 Number，多选时只接受 Array	String, Number, Array	-
data	Tree 的数据，基本同 iView Tree，但要额外设置一个 value 字段，而且 selected 和 checked 字段需预先设置在 data 中，详见示例	Array	[]
multiple	是否支持多选	Boolean	false
show-checkbox	是否显示多选框	Boolean	false
load-data	异步加载数据的方法，详见示例	Function	-
transfer	是否将弹层放置于 body 内	Boolean	false

# TreeSelect Events

事件名	说明	返回值
on-change	选项变化时触发	返回 String 或 Array，取决于 multiple，返回项为 data 中的 value 字段
on-open-change	下拉框展开或收起时触发	true / false

← 描述列表标签选择器 →