Yb-components
  • 组件
  • 数据展示
zougt
2022-08-18

YbOutscrollTree 固定在滚动区域外的Tree

左右分布的布局块，让其中一块定位在滚动区域外，不跟随滚动，定位块内容是树形结构

# 基本使用

广东省
暂无数据
共 0 条
  • 1
前往
页
<template>
    <div style="position:relative;height:400px;" class="app-base-bg">
        <div
            style="height:100%;overflow:auto;padding:10px;box-sizing:border-box;"
        >
            <yb-outscroll-tree
                ref="tree"
                :treeProps="treeProps"
                @current-change="treeNodeChange"
                :limitCount="20"
            >
                <yb-simple-table-page
                    ref="page"
                    :searchForm="searchForm"
                    :table="table"
                    :pagination="pagination"
                    :getTableData="getTableData"
                    storageKey="yb-simple-table-page-tree"
                >
                    <!-- 表单控件slots "searchForm-"开头的slotName（与searchForm.formItems[].prop拼接） -->
                    <template
                        v-slot:searchForm-formItems="{ formModel, formItem }"
                    >
                        <el-input
                            v-model="formModel[formItem.prop]"
                            clearable
                        ></el-input>
                    </template>
                    <!-- 在表单后面追加按钮 -->
                    <template v-slot:searchForm-other-buttons="">
                        <el-button type="primary">新增</el-button>
                    </template>
                    <!-- 表格列slots "table-"开头的slotName（与table.columns[].prop拼接）-->
                    <template v-slot:table-action-buttons="{ table }">
                        <el-button type="default" size="mini">查看</el-button>
                        <el-button
                            type="primary"
                            size="mini"
                            @click="openDrawer"
                            >修改</el-button
                        >
                        <el-button type="danger" size="mini" @click="openDialog"
                            >删除</el-button
                        >
                    </template>
                </yb-simple-table-page>
                <el-drawer
                    :visible.sync="formViewerDrawer"
                    size="94%"
                    append-to-body
                >
                    <template v-slot:title>
                        <span style="margin-left: 10px">蓝蓝</span>
                    </template>
                    <div style="margin: 0 20px 20px" ref="formApp"></div>
                </el-drawer>
                <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                >
                    <span>这是一段信息</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false"
                            >取 消</el-button
                        >
                        <el-button type="primary" @click="dialogVisible = false"
                            >确 定</el-button
                        >
                    </span>
                </el-dialog>
            </yb-outscroll-tree>
        </div>
    </div>
</template>
<script>
    const tableData = JSON.parse(
        `[{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老李","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"姓名","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"}]`
    ).map((item, i) => ({ ...item, id: i + 1 }));
    const treeData = JSON.parse(
        '[{"children":[{"dictName":"地市","id":"95a4e338b864dda3ca59ad82af9fa3ba","isLeaf":true,"itemName":"广州市","itemValue":"440100","children":[{"dictName":"区","id":"95a4e338b864dda3ca59ad82af9fa3ba22","isLeaf":true,"itemName":"海珠区","itemValue":"440100","children":[{"dictName":"街道","id":"95a4e338b864dda3ca59ad82af9fa3ba221","isLeaf":true,"itemName":"街道1","itemValue":"440100"},{"dictName":"街道","id":"95a4e338b864dda3ca59ad82af9fa3ba222","isLeaf":true,"itemName":"街道2","itemValue":"440100"}]},{"dictName":"区","id":"95a4e338b864dda3ca59ad82af9fa3ba22","isLeaf":true,"itemName":"天河区","itemValue":"440100"}]},{"dictKind":"city","dictName":"地市","id":"2797430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"韶关市","itemValue":"440200"},{"dictKind":"city","dictName":"地市","id":"b9261f14475ac2f890b9b534272552bb","isLeaf":true,"itemName":"深圳市","itemValue":"440300"},{"dictKind":"city","dictName":"地市","id":"a08eafed2fb10aee2937e16c0787e6a7","isLeaf":true,"itemName":"珠海市","itemValue":"440400"},{"dictKind":"city","dictName":"地市","id":"1373fc23215d121bc182eaa259b1eaf8","isLeaf":true,"itemName":"汕头市","itemValue":"440500"},{"dictKind":"city","dictName":"地市","id":"56a0b66b0c3023d69db7189cc4dec7c7","isLeaf":true,"itemName":"佛山市","itemValue":"440600"},{"dictKind":"city","dictName":"地市","id":"3597430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"江门市","itemValue":"440700"},{"dictKind":"city","dictName":"地市","id":"2777430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"湛江市","itemValue":"440800"},{"dictKind":"city","dictName":"地市","id":"2796430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"茂名市","itemValue":"440900"},{"dictKind":"city","dictName":"地市","id":"2790430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"肇庆市","itemValue":"441200"},{"dictKind":"city","dictName":"地市","id":"2790400bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"惠州市","itemValue":"441300"},{"dictKind":"city","dictName":"地市","id":"2790490bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"梅州市","itemValue":"441400"},{"dictKind":"city","dictName":"地市","id":"2790490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"汕尾市","itemValue":"441500"},{"dictKind":"city","dictName":"地市","id":"2790590bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"河源市","itemValue":"441600"},{"dictKind":"city","dictName":"地市","id":"2791490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"阳江市","itemValue":"441700"},{"dictKind":"city","dictName":"地市","id":"2792490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"清远市","itemValue":"441800"},{"dictKind":"city","dictName":"地市","id":"2796490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"东莞市","itemValue":"441900"},{"dictKind":"city","dictName":"地市","id":"2798490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"中山市","itemValue":"442000"},{"dictKind":"city","dictName":"地市","id":"2799490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"潮州市","itemValue":"445100"},{"dictKind":"city","dictName":"地市","id":"2790290bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"揭阳市","itemValue":"445200"},{"dictKind":"city","dictName":"地市","id":"2790990bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"云浮市","itemValue":"445300"}],"dictName":"省份","id":"5c149e840f85351b7683021ea233852b","isLeaf":true,"itemName":"广东省"}]'
    );

    export default {
        data() {
            const formItems = [
                {
                    label: '病案号',
                    prop: 'medicalRecordNumber',
                },
                {
                    label: '姓名',
                    prop: 'patientName',
                    defaultValue: '1',
                },
                {
                    label: '',
                    prop: 'other-buttons',
                    // 不包含在栅格布局中
                    excludeSpans: true,
                    // 排放在默认的查询按钮之后
                    after: true,
                },
            ];
            return {
                treeProps: {
                    props: { label: 'itemName', children: 'children' },
                    data: treeData,
                    defaultExpandedKeys: [],
                    nodeKey: 'id',
                },
                dialogVisible: false,
                formViewerDrawer: false,
                pagination: {},
                searchForm: {
                    formItems,
                    spans: { xl: 8, lg: 12 },
                },
                table: {
                    'highlight-current-row': true,
                    columns: [
                        {
                            label: '病案号',
                            prop: 'medicalRecordNumber',
                            'show-overflow-tooltip': true,
                            width: '120px',
                        },
                        {
                            label: '姓名',
                            prop: 'patientName',
                        },
                        {
                            label: '信息分类',
                            prop: 'projectTypeName',

                            'show-overflow-tooltip': true,
                        },
                        {
                            label: '操作',
                            prop: 'action-buttons',
                            width: '220px',
                            visibleForce: true,
                        },
                    ],
                },
            };
        },
        methods: {
            getTableData(query) {
                return Promise.resolve({
                    total: tableData.length,
                    tableData: tableData.slice(
                        (query.currentPage - 1) * query.pageSize,
                        query.currentPage * query.pageSize
                    ),
                });
            },
            openDrawer() {
                this.formViewerDrawer = true;
            },
            openDialog() {
                this.dialogVisible = true;
            },
            treeNodeChange(nodeData, node) {
                console.log(nodeData, node);
            },
        },
    };
</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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
显示 复制

# 树节点右键菜单

加上样式类名yb-tree-node-hover-show, 在 after-node-label 插槽的根 dom 元素加上样式类名yb-tree-node-label-right，就可以鼠标移上去才显示右边按钮

广东省
滚动区域内容
<template>
    <div style="position:relative;height:400px;" class="app-base-bg">
        <div
            style="height:100%;overflow:auto;padding:10px;box-sizing:border-box;"
        >
            <yb-outscroll-tree
                ref="tree"
                :treeProps="treeProps"
                contextmenuEnabled
                @current-change="treeNodeChange"
                :contextmenuButtons="contextmenuButtons"
                @contextmenuButtonsClick="contextmenuButtonsClick"
                :limit-count="20"
                class="yb-tree-node-hover-show"
            >
                <template #after-node-label="{ data ,node}">
                    <div class="yb-tree-node-label-right">
                        <el-dropdown
                            size="medium"
                            placement="bottom-start"
                            @command="menuDropdownItemClick($event, data)"
                            trigger="hover"
                        >
                            <el-button
                                class="yb-grey-action-button"
                                size="mini"
                                icon="el-icon-more"
                                @click.stop="() => {}"
                            ></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <div class="yb-dropdown-menu-title">
                                    {{ node.label }}
                                </div>
                                <el-dropdown-item
                                    v-for="item in contextmenuButtons({ data })"
                                    :icon="item.icon"
                                    :key="item.key"
                                    :command="item.key"
                                >
                                    {{ item.name }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </template>
                <template #node-label-tooltip="{data,node}">
                    <div style="margin-bottom:8px">{{node.label}}</div>
                    <div style="margin-bottom:8px">
                        itemValue：{{data.itemValue}}
                    </div>
                    <div>id：{{data.id}}</div>
                </template>
                <div slot="aboveSearch" style="padding:10px 10px 0;">
                    <el-button size="mini">新增根节点</el-button>
                </div>
                <div style="height:800px">滚动区域内容</div>
            </yb-outscroll-tree>
        </div>
    </div>
</template>
<script>
    const treeData = JSON.parse(
        '[{"children":[{"dictName":"地市","id":"95a4e338b864dda3ca59ad82af9fa3ba","isLeaf":true,"itemName":"广州市，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称，很长很长的名称","itemValue":"440100"},{"dictKind":"city","dictName":"地市","id":"2797430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"韶关市","itemValue":"440200"},{"dictKind":"city","dictName":"地市","id":"b9261f14475ac2f890b9b534272552bb","isLeaf":true,"itemName":"深圳市","itemValue":"440300"},{"dictKind":"city","dictName":"地市","id":"a08eafed2fb10aee2937e16c0787e6a7","isLeaf":true,"itemName":"珠海市","itemValue":"440400"},{"dictKind":"city","dictName":"地市","id":"1373fc23215d121bc182eaa259b1eaf8","isLeaf":true,"itemName":"汕头市","itemValue":"440500"},{"dictKind":"city","dictName":"地市","id":"56a0b66b0c3023d69db7189cc4dec7c7","isLeaf":true,"itemName":"佛山市","itemValue":"440600"},{"dictKind":"city","dictName":"地市","id":"3597430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"江门市","itemValue":"440700"},{"dictKind":"city","dictName":"地市","id":"2777430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"湛江市","itemValue":"440800"},{"dictKind":"city","dictName":"地市","id":"2796430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"茂名市","itemValue":"440900"},{"dictKind":"city","dictName":"地市","id":"2790430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"肇庆市","itemValue":"441200"},{"dictKind":"city","dictName":"地市","id":"2790400bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"惠州市","itemValue":"441300"},{"dictKind":"city","dictName":"地市","id":"2790490bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"梅州市","itemValue":"441400"},{"dictKind":"city","dictName":"地市","id":"2790490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"汕尾市","itemValue":"441500"},{"dictKind":"city","dictName":"地市","id":"2790590bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"河源市","itemValue":"441600"},{"dictKind":"city","dictName":"地市","id":"2791490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"阳江市","itemValue":"441700"},{"dictKind":"city","dictName":"地市","id":"2792490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"清远市","itemValue":"441800"},{"dictKind":"city","dictName":"地市","id":"2796490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"东莞市","itemValue":"441900"},{"dictKind":"city","dictName":"地市","id":"2798490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"中山市","itemValue":"442000"},{"dictKind":"city","dictName":"地市","id":"2799490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"潮州市","itemValue":"445100"},{"dictKind":"city","dictName":"地市","id":"2790290bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"揭阳市","itemValue":"445200"},{"dictKind":"city","dictName":"地市","id":"2790990bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"云浮市","itemValue":"445300"}],"dictName":"省份","id":"5c149e840f85351b7683021ea233852b","isLeaf":true,"itemName":"广东省"}]'
    );

    export default {
        data() {
            return {
                treeProps: {
                    props: { label: 'itemName', children: 'children' },
                    data: treeData,
                    defaultExpandedKeys: [],
                    nodeKey: 'id',
                    showLabelLine: true,
                },
            };
        },
        methods: {
            contextmenuButtons({ data }) {
                const buttons = [];

                buttons.push({
                    name: '新建目录',
                    key: 'addCategory',
                    icon: 'el-icon-folder-add',
                });

                buttons.push({
                    name: '复制',
                    key: 'copy',
                    icon: 'el-icon-copy-document',
                });

                buttons.push({
                    name: '重命名',
                    key: 'rename',
                    icon: 'el-icon-edit',
                });
                buttons.push({
                    name: '移动',
                    key: 'move',
                    icon: 'el-icon-bottom-right',
                });
                buttons.push({
                    name: '删除',
                    key: 'delete',
                    icon: 'el-icon-delete',
                });

                return buttons;
            },
            treeNodeChange(nodeData, node) {
                console.log(nodeData, node);
            },
            contextmenuButtonsClick({ data }, buttonItem, e, hideMenu) {
                this.menuDropdownItemClick(buttonItem.key, data);
                hideMenu();
            },
            menuDropdownItemClick(command, data) {
                console.log(command, data);
            },
        },
    };
</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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
显示 复制

# 只显示左边树部分

启用onlyTree属性

广东省 
<template>
    <div
        style="position:relative;height:400px;padding:10px"
        class="app-base-bg"
    >
        <div
            style="width:400px;background-color:#fff;height:100%;overflow:auto;margin:0px auto;"
        >
            <yb-outscroll-tree
                ref="tree"
                :treeProps="treeProps"
                contextmenuEnabled
                @current-change="treeNodeChange"
                :contextmenuButtons="contextmenuButtons"
                @contextmenuButtonsClick="contextmenuButtonsClick"
                :limit-count="20"
                onlyTree
            >
                <div slot="aboveSearch" style="padding:10px 10px 0;">
                    <el-button size="mini">新增根节点</el-button>
                </div>
            </yb-outscroll-tree>
        </div>
    </div>
</template>
<script>
    const treeData = JSON.parse(
        '[{"children":[{"dictName":"地市","id":"95a4e338b864dda3ca59ad82af9fa3ba","isLeaf":true,"itemName":"广州市","itemValue":"440100","children":[{"dictName":"区","id":"95a4e338b864dda3ca59ad82af9fa3ba22","isLeaf":true,"itemName":"海珠区","itemValue":"440100","children":[{"dictName":"街道","id":"95a4e338b864dda3ca59ad82af9fa3ba221","isLeaf":true,"itemName":"街道1","itemValue":"440100"},{"dictName":"街道","id":"95a4e338b864dda3ca59ad82af9fa3ba222","isLeaf":true,"itemName":"街道2","itemValue":"440100"}]},{"dictName":"区","id":"95a4e338b864dda3ca59ad82af9fa3ba22","isLeaf":true,"itemName":"天河区","itemValue":"440100"}]},{"dictKind":"city","dictName":"地市","id":"2797430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"韶关市","itemValue":"440200"},{"dictKind":"city","dictName":"地市","id":"b9261f14475ac2f890b9b534272552bb","isLeaf":true,"itemName":"深圳市","itemValue":"440300"},{"dictKind":"city","dictName":"地市","id":"a08eafed2fb10aee2937e16c0787e6a7","isLeaf":true,"itemName":"珠海市","itemValue":"440400"},{"dictKind":"city","dictName":"地市","id":"1373fc23215d121bc182eaa259b1eaf8","isLeaf":true,"itemName":"汕头市","itemValue":"440500"},{"dictKind":"city","dictName":"地市","id":"56a0b66b0c3023d69db7189cc4dec7c7","isLeaf":true,"itemName":"佛山市","itemValue":"440600"},{"dictKind":"city","dictName":"地市","id":"3597430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"江门市","itemValue":"440700"},{"dictKind":"city","dictName":"地市","id":"2777430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"湛江市","itemValue":"440800"},{"dictKind":"city","dictName":"地市","id":"2796430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"茂名市","itemValue":"440900"},{"dictKind":"city","dictName":"地市","id":"2790430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"肇庆市","itemValue":"441200"},{"dictKind":"city","dictName":"地市","id":"2790400bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"惠州市","itemValue":"441300"},{"dictKind":"city","dictName":"地市","id":"2790490bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"梅州市","itemValue":"441400"},{"dictKind":"city","dictName":"地市","id":"2790490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"汕尾市","itemValue":"441500"},{"dictKind":"city","dictName":"地市","id":"2790590bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"河源市","itemValue":"441600"},{"dictKind":"city","dictName":"地市","id":"2791490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"阳江市","itemValue":"441700"},{"dictKind":"city","dictName":"地市","id":"2792490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"清远市","itemValue":"441800"},{"dictKind":"city","dictName":"地市","id":"2796490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"东莞市","itemValue":"441900"},{"dictKind":"city","dictName":"地市","id":"2798490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"中山市","itemValue":"442000"},{"dictKind":"city","dictName":"地市","id":"2799490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"潮州市","itemValue":"445100"},{"dictKind":"city","dictName":"地市","id":"2790290bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"揭阳市","itemValue":"445200"},{"dictKind":"city","dictName":"地市","id":"2790990bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"云浮市","itemValue":"445300"}],"dictName":"省份","id":"5c149e840f85351b7683021ea233852b","isLeaf":true,"itemName":"广东省"}]'
    );

    export default {
        data() {
            return {
                treeProps: {
                    props: { label: 'itemName', children: 'children' },
                    data: treeData,
                    defaultExpandedKeys: [],
                    nodeKey: 'id',
                },
                contextmenuButtons: [
                    {
                        name: '修改',
                        key: 'update',
                        type: 'primary',
                    },
                    {
                        name: '删除',
                        key: 'delete',
                        type: 'danger',
                    },
                ],
            };
        },
        methods: {
            treeNodeChange(nodeData, node) {
                console.log(nodeData, node);
            },
            contextmenuButtonsClick(data, item, e) {
                console.log(data, item, e);
            },
        },
    };
</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
显示 复制

# Props

参数 说明 类型 可选值 默认值
showFixed 是否显示固定区域块 boolean - true
fixedPosition 固定区域的位置 string 'left'|'right' 'left'
fixedWidth 固定区域的宽度 string - '220px'
allFixed 让左右两边都固定在可视区域，让父元素不出现滚动条 boolean - false
fixedLoading 固定区域显示 loading 度 boolean - false
treeProps Tree 的属性，同yb-tree object - {}
searchPlaceholder 查询输入框的 placeholder string - '搜索'
contextmenuEnabled 是否右键菜单 boolean - false
contextmenuButtons 右键菜单的按钮列表，配合 contextmenuButtonsClick 点击事件，如：[{name: '修改',key: 'update'},{name: '删除',key: 'delete'}] object[]|function({node,data}){return []} - []
mode 节点显示模式，v1.15.0+ 废弃此属性，不再需要“tree”和 “cascader”的切换 string 'tree'|'cascader'|'auto' 'auto'
limitCount ~~当mode设置为auto生效，任一子节点数据超过该数值，则切换为cascader模式，否则为tree模式 ~~， v1.15.0+ 用途改为同 yb-tree 的 pageSize number - 100
pageSize 每个节点一次最多只加载的子节点数量，超过这个数会出现“展开更多”的按钮 number - 100
resetToFirstPage 是否折叠节点时，重置到第一页，以下次再展开时，只显示 pageSize 的子节点数量线 boolean - false
onlyTree 只显示左侧树，不显示右侧 boolean - false

# Methods

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

方法名称 说明 参数 返回值
getTree 取得 el-tree 的组件实例 - -
activeTreeNode 高亮节点，等同 this.$refs['tree'].getTree().setCurrentKey(id) id -

# Events

事件名称 说明 参数
contextmenuButtonsClick 右键菜单按钮 contextmenuButtons 的点击事件 treeNodeData,item,event,hideMenu

其他事件是同 el-tree Events (opens new window)

# 插槽

事件名称 说明 参数
default 默认插槽：滚动区域内容 -
contextmenu 自定义节点右键菜单内容 {data,node}
aboveSearch 在查询框上面插入内容 {data,node}
node-label 左侧树组件自定义节点 label 区域插槽 {data,node}
after-node-label 左侧树组件显示横线时追加在横线右边的内容 {data,node}
node-label-tooltip 左侧树组件自定义鼠标移入节点名称时展示的浮窗内容 {data,node}
上次更新: 2024/10/12, 11:10:09
YbOutscrollLayout 固定在滚动区域外
YbInfoLayout 信息页布局

← YbInfoLayout 信息页布局→

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