Yb-components
  • 组件
  • 数据录入
guoQianGui
2023-01-16

YbTreeSelect 树型选择器

注意：旧版 api 已废弃，在下一个主版本将完全去除。本版本对旧版 api 做了兼容，仍可继续使用旧版 api，请逐步替换成新版 api，详情见Props。

# 基本使用

当开启 leaf-only 时，只有叶节点才能被选中

<template>
    <yb-tree-select
        v-model="value"
        clearable
        defaultExpandAll
        valueKey="key"
        :optionsFieldMap="optionsFieldMap"
        :options="options"
        @current-change="handleCurrentChange"
        @clear="handleClear"
        leaf-only
    />
</template>
<script>
    export default {
        data() {
            return {
                optionsFieldMap: {
                    label: 'title',
                    children: 'children',
                    disabled: 'disabled',
                },
                options: [
                    {
                        title: 'Node1',
                        value: '0-0',
                        key: '0-0',
                        children: [
                            {
                                title: 'Child Node1',
                                value: '0-0-0',
                                key: '0-0-0',
                            },
                        ],
                    },
                    {
                        title: 'Node2',
                        value: '0-1',
                        key: '0-1',
                        children: [
                            {
                                title: 'Child Node3',
                                value: '0-1-0',
                                key: '0-1-0',
                                disabled: true,
                            },
                            {
                                title: 'Child Node4',
                                value: '0-1-1',
                                key: '0-1-1',
                            },
                            {
                                title: 'Child Node5',
                                value: '0-1-2',
                                key: '0-1-2',
                            },
                        ],
                    },
                ],
                value: '0-1-1',
            };
        },

        methods: {
            handleCurrentChange(data, node) {
                // 当前节点的数据，当前节点的 Node 对象
                console.log('current-change', data, node);
            },
            handleClear() {
                console.log('clear');
            },
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
显示 复制

# 可筛选

<template>
    <yb-tree-select
        v-model="value"
        clearable
        valueKey="key"
        :optionsFieldMap="optionsFieldMap"
        :options="options"
        filterable
        :expandedKeys="['0-1']"
        :filterNodeMethod="filterNodeMethod"
    />
</template>
<script>
    export default {
        data() {
            return {
                optionsFieldMap: {
                    label: 'title',
                    children: 'children',
                    disabled: 'disabled',
                },
                options: [
                    {
                        title: 'Node1',
                        value: '0-0',
                        key: '0-0',
                        children: [
                            {
                                title: 'Child Node1',
                                value: '0-0-0',
                                key: '0-0-0',
                            },
                        ],
                    },
                    {
                        title: 'Node2',
                        value: '0-1',
                        key: '0-1',
                        children: [
                            {
                                title: 'Child Node3',
                                value: '0-1-0',
                                key: '0-1-0',
                                disabled: true,
                            },
                            {
                                title: 'Child Node4',
                                value: '0-1-1',
                                key: '0-1-1',
                            },
                            {
                                title: 'Child Node5',
                                value: '0-1-2',
                                key: '0-1-2',
                            },
                        ],
                    },
                ],
                value: null,
            };
        },
        methods: {
            // 自定义筛选方式，默认筛选 节点label 可拼音匹配
            filterNodeMethod(keyword, data, node) {
                if (!keyword) return true;
                return (node.label || '').includes(keyword);
            },
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
显示 复制

# 全选

  • 全选功能默认 multiple 属性为 true 时生效，需要关闭则 is-show-select-all 设置为 false
  • 若选项中存在禁用状态的选项，点击全选也无法被选中
size
clearable
disabled
filterable
collapse-tags
check-strictly
is-show-select-all
leaf-only 
<template>
    <el-row>
        <el-col :span="10">
            <div style="margin-bottom:20px">
                size
                <el-radio-group v-model="multipleProps['size']" size="mini">
                    <el-radio-button label="medium">medium</el-radio-button>
                    <el-radio-button label="small">small</el-radio-button>
                    <el-radio-button label="mini">mini</el-radio-button>
                </el-radio-group>
            </div>
            <div style="margin-bottom:20px">
                clearable
                <el-switch v-model="multipleProps['clearable']"></el-switch>
            </div>
            <div style="margin-bottom:20px">
                disabled
                <el-switch v-model="multipleProps['disabled']"></el-switch>
            </div>
            <div style="margin-bottom:20px">
                filterable
                <el-switch v-model="multipleProps['filterable']"></el-switch>
            </div>
            <div style="margin-bottom:20px">
                collapse-tags
                <el-switch v-model="multipleProps['collapse-tags']"></el-switch>
            </div>
            <div style="margin-bottom:20px">
                check-strictly
                <el-switch
                    v-model="multipleProps['check-strictly']"
                ></el-switch>
            </div>
            <div style="margin-bottom:20px">
                is-show-select-all
                <el-switch
                    v-model="multipleProps['is-show-select-all']"
                ></el-switch>
            </div>
            <div style="margin-bottom:20px">
                leaf-only
                <el-switch
                    v-model="multipleProps['leaf-only']"
                    @change="value = null"
                ></el-switch>
            </div>
        </el-col>
        <el-col :span="12">
            <yb-tree-select
                v-model="value"
                multiple
                valueKey="key"
                :options="options"
                v-bind="multipleProps"
            />
        </el-col>
    </el-row>
</template>
<script>
    export default {
        data() {
            return {
                multipleProps: {
                    size: 'small',
                    'is-show-select-all': true,
                    'leaf-only': false,
                },
                options: [
                    {
                        label: 'Node1',
                        value: '0-0',
                        key: '0-0',
                        children: [
                            {
                                label: 'Child Node1',
                                value: '0-0-0',
                                key: '0-0-0',
                            },
                        ],
                    },
                    {
                        label: 'Node2',
                        value: '0-1',
                        key: '0-1',
                        children: [
                            {
                                label: 'Child Node3',
                                value: '0-1-0',
                                key: '0-1-0',
                                disabled: true,
                            },
                            {
                                label: 'Child Node4',
                                value: '0-1-1',
                                key: '0-1-1',
                            },
                            {
                                label: 'Child Node5',
                                value: '0-1-2',
                                key: '0-1-2',
                            },
                        ],
                    },
                ],
                value: ['0-0', '0-0-0', '0-1', '0-1-1', '0-1-2'],
            };
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
显示 复制

# 懒加载

  • params 默认请求参数，当改变时，会触发请求
  • request 加载数据，返回 Promise 或者 Array
基本使用：
打开面板进行搜索： 
<template>
    <div style="margin-bottom:20px">
        基本使用：
        <yb-tree-select
            v-model="value"
            clearable
            valueKey="key"
            :params="params"
            :request="getOptionRequest"
        />
    </div>
    <div style="margin-bottom:20px">
        打开面板进行搜索：
        <yb-tree-select
            searchWhenOpen
            v-model="value"
            clearable
            valueKey="key"
            :params="params"
            :request="searchWhenOpenRequest"
        />
    </div>
</template>
<script>
    const data = [
        { label: 'Node1', value: '0-0', key: '0-0' },
        { label: 'Node2', value: '0-1', key: '0-1' },
        { label: 'Node3', value: '0-2', key: '0-2' },
        { label: 'Node4', value: '0-3', key: '0-3' },
        { label: 'Node5', value: '0-4', key: '0-4' },
        { label: 'Root6', value: '0-6', key: '0-6' },
    ];
    export default {
        data() {
            return {
                value: '',
                params: {
                    defaultLabel: 'Node',
                },
            };
        },
        methods: {
            getOptionRequest(params) {
                console.log('getOptionRequest', params);
                return new Promise((resolve) => {
                    setTimeout(() => {
                        if (params.defaultLabel) {
                            return resolve(
                                data.filter((item) =>
                                    item.label.includes(params.defaultLabel)
                                )
                            );
                        }
                        return resolve(data);
                    }, 1000);
                });
            },
            searchWhenOpenRequest(params) {
                console.log('searchWhenOpenRequest', params);
                return new Promise((resolve) => {
                    setTimeout(() => {
                        if (params.defaultLabel) {
                            return resolve(
                                data.filter((item) =>
                                    item.label.includes(params.defaultLabel)
                                )
                            );
                        }
                        return resolve(data);
                    }, 1000);
                });
            },
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
显示 复制

# 可搜索

  • 设置 filterable 和 remote 为 true，request 函数即可远程搜索，并且提供 params.queryWord
<template>
    <yb-tree-select
        v-model="value"
        clearable
        remote
        valueKey="key"
        :request="getOptionRequest"
        filterable
    />
</template>
<script>
    export default {
        data() {
            return {
                value: '0-0',
            };
        },
        methods: {
            getOptionRequest(params) {
                const data = [
                    { label: 'Node1', value: '0-0', key: '0-0' },
                    { label: 'Node2', value: '0-1', key: '0-1' },
                    { label: 'Node3', value: '0-2', key: '0-2' },
                    { label: 'Node4', value: '0-3', key: '0-3' },
                    { label: 'Node5', value: '0-4', key: '0-4' },
                ];
                return new Promise((resolve) => {
                    setTimeout(() => {
                        if (params.queryWord) {
                            return resolve(
                                data.filter((item) =>
                                    item.label.includes(params.queryWord)
                                )
                            );
                        }
                        return resolve(data);
                    }, 1000);
                });
            },
        },
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
显示 复制

# 插槽的使用

  • 插槽
    • prefix：组件头部内容插槽名称
    • empty：无选项时插槽名称
  • 作用域插槽
    • default：自定义整行节点 label 区域插槽名称，参数：{ data, node }，如果添加了会使 "node-label"和"after-node-label"无效
    • node-label： 显示横线时自定义节点 label 区域插槽名称，参数：{ data, node }
    • after-node-label: 显示横线时追加在横线右边的内容插槽名称，参数：{ data, node }
    • node-label-tooltip: 自定义鼠标移入节点名称时展示的浮窗内容，参数：{ data, node }
Pre
<template>
    <yb-tree-select
        v-model="value"
        clearable
        defaultExpandAll
        valueKey="key"
        :options="options"
        filterable
    >
        <template v-slot:prefix>
            <span>Pre</span>
        </template>
        <template v-slot:empty>
            <el-empty :image-size="70"></el-empty>
        </template>
        <template v-slot="{ node, data }">
            <span :style="{ color: node.disabled ? '#ccc' : ''}">
                {{data.key}}({{data.label}})
            </span>
        </template>
    </yb-tree-select>
</template>
<script>
    export default {
        data() {
            return {
                options: [
                    {
                        label: 'Node1',
                        value: '0-0',
                        key: '0-0',
                        children: [
                            {
                                label: 'Child Node1',
                                value: '0-0-0',
                                key: '0-0-0',
                            },
                        ],
                    },
                    {
                        label: 'Node2',
                        value: '0-1',
                        key: '0-1',
                        children: [
                            {
                                label: 'Child Node3',
                                value: '0-1-0',
                                key: '0-1-0',
                                disabled: true,
                            },
                            {
                                label: 'Child Node4',
                                value: '0-1-1',
                                key: '0-1-1',
                            },
                            {
                                label: 'Child Node5',
                                value: '0-1-2',
                                key: '0-1-2',
                            },
                        ],
                    },
                ],
                value: '',
            };
        },
        methods: {},
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
显示 复制

# Props

参数 说明 类型 可选值 默认值
value / v-model 绑定值 boolean / string / number -- --
multiple 是否多选 boolean - false
getSelectedLabel 自定义显示选中的名称 function(node,valueKey,value){ return { [valueKey]:value,label:"自定义" } } - false
leafOnly 是否只有叶节点才能被选中 boolean - false
optionsFieldMap 选项中字段映射，如果全选无效请确认是否给定 optionsFieldMap.key，详见 Props optionsFieldMap object -- --
request 加载下拉选项数据，返回 Promise 或者 Array，优先级最高 function({queryWord,...others}){} -- --
params 加载下拉选项数据的请求参数，与 request 配合使用，当数据改变时，触发 request object -- --
options 下拉选项数据，优先级仅次于 request array -- --
debounceTime 防抖动时间，与 request 配合使用 number -- 300
searchWhenOpen 是否每次打开面板加载数据，与 request 配合使用 boolean -- --
formatter 格式化数据，function(item) 需返回渲染数据 function -- --
dependence 依赖字段，当设置依赖字段时，只有依赖字段值发生变化才会调用 request array -- --
isShowSelectAll 是否显示全选，详见 全选用法 boolean -- true
expandedKeys 当存在分组的选项时，展开的分组的 keys , 支持 sync 修饰符 array -- --
defaultExpandAll 当存在分组的选项时，是否默认全部展开 , 如果是数字类型，可以让前几组默认展开 boolean | number -- true
optionsArrangeToRight 选项是否从左往右排布，一行最多排 4 个 boolean -- false
valueChangeToRequest 当使用了 request 获取选项时，只要 value 在外部被改变时会触发一次 request 函数，无论 searchWhenOpen 是否开启 boolean -- false
pageSize 每个节点一次最多只加载的子节点数量，超过这个数会出现“展开更多”的按钮 number - 100
checkStrictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false boolean — false
resetToFirstPage 是否折叠节点时，重置到第一页，以下次再展开时，只显示 pageSize 的子节点数量；而且 data 改变时，即使存在相同的 nodeKey 节点也会重置到第一页 boolean - false
showLine 是否显示结构线 boolean - true
showLabelLine 是否显示节点名称后面的线线 boolean - true
expandIconIndent 展开小图标的缩进 number - 16
labelTooltip 鼠标移入节点名称显示浮窗信息，默认是'overflow'，节点名称溢出才显示完整的名称，还可以通过函数控制哪些节点才显示 function({data,node}){return Boolean} ，当使用 node-label 插槽时，label 需要放进有 className 为'el-tree-node__label'的盒子里，labelTooltip 才会有效 string|function 'always' | 'overflow'|'none'
labelTooltipConfig 对应 el-popover (opens new window)的属性 object {}
-- 其他属性同 el-select (opens new window)，其中 -- -- --
... 其他属性同 el-tree (opens new window) -- -- --
debounceWait 已废弃，防抖动时间，与 request 配合使用 number -- 300
selectOptions 已废弃，yb-select 的属性，需使用驼峰写法，不支持 value object -- {}
treeOptions 已废弃，yb-tree 的属性，需使用驼峰写法 object -- {}
selectEvents 已废弃，yb-select 的事件 object -- {}
treeEvents 已废弃，yb-tree 的事件 object -- {}
mode 用于指定树型组件是 el-tree还是 yb-cascader-list。若值为 auto，则根据 limitCount自动计算，v1.15.0+ 废弃此属性 string tree/cascader/auto auto
limitCount 当节点数量超过了这个限制，树型组件会选用 yb-cascader-list，否则为 el-tree，v1.15.0+ 用途改为同 yb-tree 的 pageSize，即同 treeOptions.pageSize number -- 100
treeData 已废弃，请使用 treeOptions.data 代替
treeProps 已废弃，请使用 treeOptions.props 代替
treeNodeKey 已废弃，请使用 treeOptions.nodeKey 代替
selectValueKey 已废弃，请使用 treeOptions.nodeKey 代替
treeCheckStrictly 已废弃，请使用 treeOptions.checkStrictly 代替

# Props optionsFieldMap

参数 说明 类型 可选值 默认值
label 指定节点标签为节点对象的某个属性值 string -- 'label'
value 指定节点值为节点对象的某个属性值 string -- 'value'
key 指定节点 key 为节点对象的某个属性值，在多选时，请保证 options[optionsFieldMap.key]值是唯一的 string -- 'value'
disabled 指定节点禁用为节点对象的某个属性值 string -- 'disabled'
children 指定节点分组子节点数据为节点对象的某个属性值 string -- 'children'
isLeaf 指定节点叶节点为节点对象的某个属性值 string -- 'isLeaf'

# Methods

方法调用方式应该是 this.$refs['tree']['methodName']()

方法名称 说明 参数 返回值
getSelect 获取 el-select 实例 -
getTree 获取 el-tree 实例 -
getSelectedNodes 已废弃 - object|object[]

# Events

事件名称 说明 参数
change 选中值发生变化时触发 目前的选中值
visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false
remove-tag 多选模式下移除 tag 时触发 移除的 tag 值
clear 可清空的单选模式下用户点击清空按钮时触发 —
blur 当 input 失去焦点时触发 (event: Event)
focus 当 input 获得焦点时触发 (event: Event)
node-click 节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
node-contextmenu 当某一节点被鼠标右键点击时会触发该事件 共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
check-change 节点选中状态发生变化时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
check 当复选框被点击的时候触发 共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
current-change 当前选中节点变化时触发的事件 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象
node-expand 节点被展开时触发的事件 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse 节点被关闭时触发的事件 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身

# Slots

名称 说明
prefix 组件头部内容
empty 无选项时插槽名称

# Scoped Slots

名称 说明 参数
default 自定义整行节点 label 区域插槽，优先级高于 node-label，after-node-label { data, node }
node-label 自定义节点 label 区域插槽 { data, node }
after-node-label 显示横线时追加在横线右边的内容 { data, node }
node-label-tooltip 自定义鼠标移入节点名称时展示的浮窗内容 { data, node }
上次更新: 2025/01/21, 14:27:00
YbCron 表达式生成器
YbInputgroupWrapper 复合组

← YbInputgroupWrapper 复合组→

Theme by Vdoing | Copyright © 2021-2025 YB-GZ | MIT License