Yb-components
  • 组件
  • 数据展示
zougt
2021-10-19

YbTree 树

在 el-tree (opens new window)的基础功能上添加了结构线的显示，不仅支持el-tree的所有功能，也会扩展一些功能，在使用上更加简捷。

yb-tree不再直接依赖 el-tree的代码（v1.15.0+）

# 基本使用

showLine
showLabelLine
expandIconIndent
一级 1
一级 2
二级 2-1
二级 2-2
一级 3
二级 3-1
二级 3-2
一级4
show-checkbox="false" 、 indent="40"
一级 1
一级 2
二级 2-1
二级 2-2
一级 3
二级 3-1
二级 3-2
一级4 
<template>
    <div>
        <div style="margin-bottom:20px">
            showLine
            <el-switch v-model="treeProps['showLine']"></el-switch>
            showLabelLine
            <el-switch v-model="treeProps['showLabelLine']"></el-switch>
            expandIconIndent
            <el-input-number
                v-model="treeProps['expandIconIndent']"
                :step="10"
                :min="10"
            ></el-input-number>
        </div>
        <yb-tree
            ref="tree"
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
            :showLine="treeProps['showLine']"
            :showLabelLine="treeProps['showLabelLine']"
            :expandIconIndent="treeProps['expandIconIndent']"
            draggable
        >
        </yb-tree>
        <div style="margin:20px 0">show-checkbox="false" 、 indent="40"</div>
        <yb-tree
            ref="tree"
            :data="data"
            :show-checkbox="false"
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
            :showLine="treeProps['showLine']"
            :showLabelLine="treeProps['showLabelLine']"
            :expandIconIndent="treeProps['expandIconIndent']"
            :indent="40"
        >
        </yb-tree>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                treeProps: {
                    showLine: true,
                    showLabelLine: true,
                    expandIconIndent: 16,
                },
                data: [
                    {
                        id: 1,
                        label: '一级 1',
                        children: [
                            {
                                id: 4,
                                label: '二级 1-1',
                                children: [
                                    {
                                        id: 9,
                                        label: '三级 1-1-1',
                                    },
                                    {
                                        id: 10,
                                        label: '三级 1-1-2',
                                    },
                                ],
                            },
                            {
                                id: 9000,
                                label: '二级 1-2',
                            },
                        ],
                    },
                    {
                        id: 2,
                        label: '一级 2',
                        children: [
                            {
                                id: 5,
                                label: '二级 2-1',
                            },
                            {
                                id: 6,
                                label: '二级 2-2',
                            },
                        ],
                    },
                    {
                        id: 3,
                        label: '一级 3',
                        children: [
                            {
                                id: 7,
                                label: '二级 3-1',
                            },
                            {
                                id: 8,
                                label: '二级 3-2',
                            },
                        ],
                    },
                    {
                        id: 100,
                        label: '一级4',
                    },
                ],
                defaultProps: {
                    children: 'children',
                    label: 'label',
                },
            };
        },
        methods: {
            openEdit(node) {
                console.log(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
显示 复制

# 鼠标移上显示节点右边按钮

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

showLine
showLabelLine
expandIconIndent
一级 1
一级 2
二级 2-1
二级 2-2
一级 3
二级 3-1
二级 3-2
一级4
 
<template>
    <div>
        <div style="margin-bottom:20px">
            showLine
            <el-switch v-model="treeProps['showLine']"></el-switch>
            showLabelLine
            <el-switch v-model="treeProps['showLabelLine']"></el-switch>
            expandIconIndent
            <el-input-number
                v-model="treeProps['expandIconIndent']"
                :step="10"
                :min="10"
            ></el-input-number>
        </div>
        <yb-tree
            ref="tree"
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
            :showLine="treeProps['showLine']"
            :showLabelLine="treeProps['showLabelLine']"
            :expandIconIndent="treeProps['expandIconIndent']"
            draggable
            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>
        </yb-tree>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                treeProps: {
                    showLine: true,
                    showLabelLine: true,
                    expandIconIndent: 16,
                },
                data: [
                    {
                        id: 1,
                        label: '一级 1',
                        children: [
                            {
                                id: 4,
                                label: '二级 1-1',
                                children: [
                                    {
                                        id: 9,
                                        label: '三级 1-1-1',
                                    },
                                    {
                                        id: 10,
                                        label: '三级 1-1-2',
                                    },
                                ],
                            },
                            {
                                id: 9000,
                                label: '二级 1-2',
                            },
                        ],
                    },
                    {
                        id: 2,
                        label: '一级 2',
                        children: [
                            {
                                id: 5,
                                label: '二级 2-1',
                            },
                            {
                                id: 6,
                                label: '二级 2-2',
                            },
                        ],
                    },
                    {
                        id: 3,
                        label: '一级 3',
                        children: [
                            {
                                id: 7,
                                label: '二级 3-1',
                            },
                            {
                                id: 8,
                                label: '二级 3-2',
                            },
                        ],
                    },
                    {
                        id: 100,
                        label: '一级4',
                    },
                ],
                defaultProps: {
                    children: 'children',
                    label: 'label',
                },
            };
        },
        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;
            },
        },
        contextmenuButtonsClick({ data }, buttonItem, e, hideMenu) {
            this.menuDropdownItemClick(buttonItem.key, data);
            hideMenu();
        },
    };
</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
170
171
172
173
174
175
显示 复制

# 节点按需加载

这里展示只有第三级节点才做异步加载的案例，并且每个节点的子节点数量太多的情况加载会卡顿，这里使用 pageSize 控制显示“展开更多“按钮，分布渲染每个节点的子节点数量，提升节点加载性能

showLine
showLabelLine
expandIconIndent
public
同样的数据量，一次加载大量节点与上面有”展开更多“按钮的对比
public 
<template>
    <div>
        <div style="margin-bottom:20px">
            showLine
            <el-switch v-model="treeProps['showLine']"></el-switch>
            showLabelLine
            <el-switch v-model="treeProps['showLabelLine']"></el-switch>
            expandIconIndent
            <el-input-number
                v-model="treeProps['expandIconIndent']"
                :step="10"
                :min="10"
            ></el-input-number>
        </div>
        <yb-tree
            ref="tree"
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
            :showLine="treeProps['showLine']"
            :showLabelLine="treeProps['showLabelLine']"
            :expandIconIndent="treeProps['expandIconIndent']"
            lazy
            :load="treeLoad"
            :pageSize="20"
        >
        </yb-tree>
        <div style="margin:20px 0">
            同样的数据量，一次加载大量节点与上面有”展开更多“按钮的对比
        </div>
        <yb-tree
            ref="tree"
            :data="data"
            :show-checkbox="true"
            node-key="name"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
            :showLine="treeProps['showLine']"
            :showLabelLine="treeProps['showLabelLine']"
            :expandIconIndent="treeProps['expandIconIndent']"
            lazy
            :load="treeLoad"
            :pageSize="1000"
        >
        </yb-tree>
    </div>
</template>
<script>
    const treeData = `[{"name":"public","leaf":false,"children":[{"name":"dict_monitor_cn_medicine_name_work_injury","leaf":false},{"name":"his_icu_info","leaf":false},{"name":"fact_disease_ip","leaf":false},{"name":"setl_opr_info_4103","leaf":false},{"name":"out_special_disease_archive","leaf":false},{"name":"his_medical_advice","leaf":false},{"name":"audit_exclude_content_bind_perms","leaf":false},{"name":"dw_ba_toperation","leaf":false},{"name":"dip_groups_management_result","leaf":false},{"name":"temp_ba_dieinfo","leaf":false},{"name":"app_self_settlement_patient_info","leaf":false},{"name":"self_settlement_patient_info","leaf":false},{"name":"config_qms_rule_prop","leaf":false},{"name":"yibo_rules_biz_model","leaf":false},{"name":"temp_transplant_cost","leaf":false},{"name":"doctor_lib_import_abnormal","leaf":false},{"name":"sys_user_role","leaf":false},{"name":"disease_score_gz_clinical_diag_icd_rel","leaf":false},{"name":"in_hospital_fee_item","leaf":false},{"name":"rules_compose","leaf":false},{"name":"config_qms_rule_value","leaf":false},{"name":"drgs_drg_expression","leaf":false},{"name":"dip_special_item_score_detail","leaf":false},{"name":"drgs_match_icd9","leaf":false},{"name":"t_reconciliation_log","leaf":false},{"name":"daily_out_patient_interval_date","leaf":false},{"name":"dip_interim_charged_item_detail","leaf":false},{"name":"dict_consume_material","leaf":false},{"name":"doctor_audit_history","leaf":false},{"name":"settlement_platform_brxx","leaf":false},{"name":"settlement_platform_ssxxmx","leaf":false},{"name":"settlement_platform_ssxx","leaf":false},{"name":"setl_opr_info","leaf":false},{"name":"dip_operation_dict","leaf":false},{"name":"basic_data_excel_log","leaf":false},{"name":"dip_disease_operation_type","leaf":false},{"name":"regular_time_config","leaf":false},{"name":"dict_monitor_item_special","leaf":false},{"name":"dip_operation_code_mapper","leaf":false},{"name":"t_refund_worker","leaf":false},{"name":"settle_his_temp_ip_dept","leaf":false},{"name":"not_archived_diagnosis_info_diagnose","leaf":false},{"name":"dip_groups_result_middle","leaf":false},{"name":"settle_inpatient_no_balanceinfo","leaf":false},{"name":"dip_chinese_cost_copy2","leaf":false},{"name":"settle_temp_ba_toperation","leaf":false},{"name":"sys_post_disease","leaf":false},{"name":"pre_output_message","leaf":false},{"name":"medicalrecord_formal_dict_info","leaf":false},{"name":"贵州省安顺市2023DIP分组器分值库","leaf":false},{"name":"drgs_disease_point_标准1.1","leaf":false},{"name":"dip_groups_result","leaf":false},{"name":"t_refund_config","leaf":false},{"name":"rules_val_tips_info_setl","leaf":false},{"name":"dm_pre_report_gz_ip","leaf":false},{"name":"dip_dict_negotiate_drug","leaf":false},{"name":"yibo_audit_rules_monitor_log","leaf":false},{"name":"in_hospital_output_message","leaf":false},{"name":"his_dict_in_patient_groups_info_zsfs","leaf":false},{"name":"bpm_limit_drug","leaf":false},{"name":"drgs_diagnoses_mapping_jintang","leaf":false},{"name":"dip_webservice_log","leaf":false},{"name":"dm_report_dip_cost_structure","leaf":false},{"name":"year_liquidation_compare_setl_log","leaf":false},{"name":"disease_refined_unsettle_patient_diagnosis","leaf":false},{"name":"archived_output_message","leaf":false},{"name":"self_settlement_fee_item","leaf":false},{"name":"dict_monitor_cn_medicine_register_work_injury","leaf":false},{"name":"dict_national_clinical_diagcode","leaf":false},{"name":"three_level_v2_worker_salvage","leaf":false},{"name":"doctor_lib_field_map","leaf":false},{"name":"dict_national_clinical_opcode","leaf":false},{"name":"gdyb_ssxx","leaf":false},{"name":"setl_item_info_ht","leaf":false},{"name":"his_tran_code_ysdyjs","leaf":false},{"name":"dm_dip_total","leaf":false},{"name":"procreate_classify","leaf":false},{"name":"setl_icu_info_ht","leaf":false},{"name":"dwm_dip_groups_result","leaf":false},{"name":"dip_history_group_log_rules_info","leaf":false},{"name":"hie_newhrpemployees_log","leaf":false},{"name":"his_hl7v2_message_ail","leaf":false},{"name":"dict_fee_item","leaf":false},{"name":"archived_tumor_info_period","leaf":false},{"name":"dws_cal_report_ba_gz_ip","leaf":false},{"name":"info_zengcheng_first_special_outpatient","leaf":false},{"name":"t_reconciliation_account","leaf":false},{"name":"setl_base_info","leaf":false},{"name":"self_settlement_output_message","leaf":false},{"name":"surgery_charge_drug_s01","leaf":false},{"name":"outpatient_control_apportion_setup_dept","leaf":false},{"name":"dip_leaveout_operation_feedback_information","leaf":false},{"name":"sys_msg_send","leaf":false},{"name":"his_temp_ip_patient_info","leaf":false},{"name":"dm_report_province_op","leaf":false},{"name":"daily_out_fee_item","leaf":false},{"name":"dip_afterwards_groups_patients","leaf":false},{"name":"dm_report_dip_dept_boston","leaf":false},{"name":"audit_rules_relation_knowledge","leaf":false},{"name":"respon_reac_doctor_process_record","leaf":false},{"name":"his_gateway_api_log","leaf":false},{"name":"bot_base_info","leaf":false},{"name":"summary_level_three_data","leaf":false},{"name":"rules_drug_line","leaf":false},{"name":"dict_monitor_dict_his_mapping","leaf":false},{"name":"dip_chinese_disease_score","leaf":false},{"name":"basic_data_param_config","leaf":false},{"name":"setl_pay_info_ht","leaf":false},{"name":"setl_correct_log","leaf":false},{"name":"country_cn_drug_info","leaf":false},{"name":"dip_single_disease_lib","leaf":false},{"name":"dip_case_history_data","leaf":false},{"name":"ip_patient_info","leaf":false},{"name":"dwm_report_gz_ip_settle_fee","leaf":false},{"name":"audit_exclude_content_template","leaf":false},{"name":"respon_doctor_feedback","leaf":false},{"name":"disease_score_gz_not_oper","leaf":false},{"name":"daily_out_summary_project","leaf":false},{"name":"setl_base_info_compare_bak","leaf":false},{"name":"t_refund_city","leaf":false},{"name":"dip_dialysis_disease_groups_result","leaf":false},{"name":"dict_monitor_preparation","leaf":false},{"name":"settlement_platform_zdxxmx","leaf":false},{"name":"setl_base_info_init","leaf":false},{"name":"three_level_v2_worker_copy1","leaf":false},{"name":"archived_hospital_info","leaf":false},{"name":"medicalrecord_diagnosis_info_diagnose","leaf":false},{"name":"ba_operation","leaf":false},{"name":"setl_base_info_4103","leaf":false},{"name":"dip_aid_mcc_cc","leaf":false},{"name":"his_dict_set_db","leaf":false},{"name":"medicalrecord_hospital_info","leaf":false},{"name":"data_modify_log","leaf":false},{"name":"config_custom_level","leaf":false},{"name":"dip_birth_disease_groups_result","leaf":false},{"name":"cndrgs_icd10","leaf":false},{"name":"discharge_fee_item","leaf":false},{"name":"drgs_injure_main_diag","leaf":false},{"name":"dip_profit_loss_config","leaf":false},{"name":"outpatient_control_apportion_setup_month","leaf":false},{"name":"not_archived_diagnosis_info_common","leaf":false},{"name":"his_dict_out_patient","leaf":false},{"name":"surgery_charge_drug_s02","leaf":false},{"name":"his_dict_item_20231220","leaf":false},{"name":"his_hl7v2_message_nk1","leaf":false},{"name":"sys_post_yb_user","leaf":false},{"name":"config_audit_info_manage","leaf":false},{"name":"his_detection_item","leaf":false},{"name":"his_bld_info","leaf":false},{"name":"outpatient_control_warn_ratio","leaf":false},{"name":"test_summary_project","leaf":false},{"name":"out_drug","leaf":false},{"name":"his_dict_drug","leaf":false},{"name":"yibo_audit_rules_scene","leaf":false},{"name":"rules_medicare","leaf":false},{"name":"in_hospital_settlement_drug","leaf":false},{"name":"t_reconciliation_result_unfinished","leaf":false},{"name":"dip_aid_severity_level_coef","leaf":false},{"name":"sms_message","leaf":false},{"name":"in_hospital_settlement_guest_info","leaf":false},{"name":"detail_level_province_inside_special_country","leaf":false},{"name":"audit_use_reason_rule","leaf":false},{"name":"in_hospital_drug","leaf":false},{"name":"wechat_corp_user","leaf":false},{"name":"rules_medicare_line","leaf":false},{"name":"setl_escalation_log","leaf":false},{"name":"respon_middle_doctor_no","leaf":false},{"name":"sys_dict_item_8月8号备份","leaf":false},{"name":"rules_info","leaf":false},{"name":"info_nansha_first_special_outpatient","leaf":false},{"name":"dm_ih_self_fee_detail","leaf":false},{"name":"custom_diagnosis_operation_api_log","leaf":false},{"name":"rules_qms_line_copy1","leaf":false},{"name":"his_temp_ip_patient_info_ht","leaf":false},{"name":"respon_final_violation_result","leaf":false},{"name":"in_hospital_settlement_fee_item","leaf":false},{"name":"in_hospital_decompose","leaf":false},{"name":"setl_pay_info_log","leaf":false},{"name":"pj3_gz_worker_detail","leaf":false},{"name":"medical_5203_out_param_setldetail","leaf":false},{"name":"sys_db_version","leaf":false},{"name":"test_drug","leaf":false},{"name":"cndrgs_icd_info","leaf":false},{"name":"medicalrecord_diagnosis_info_operation","leaf":false},{"name":"bot_answer_info","leaf":false},{"name":"ba_temp_diagnose","leaf":false},{"name":"dip_drg_his_fee_collect_item_config_中山医","leaf":false},{"name":"temp_ba_icuinfo","leaf":false},{"name":"basic_data_dept_manage","leaf":false},{"name":"dm_report_gz_op_special_disease","leaf":false},{"name":"wechat_config","leaf":false},{"name":"his_repeat_in_hospital_cs","leaf":false},{"name":"his_temp_ip_settle","leaf":false},{"name":"dip_drg_his_fee_collect_item_config","leaf":false},{"name":"his_opspdise_info","leaf":false},{"name":"medicalrecord_diagnosis_info_common","leaf":false},{"name":"sys_organ","leaf":false},{"name":"briefing_log","leaf":false},{"name":"rules_disease_line","leaf":false},{"name":"dip_mcc_cc_lianyungang","leaf":false},{"name":"config_use_reason","leaf":false},{"name":"his_hl7v2_message_nte","leaf":false},{"name":"item_type_summary_project","leaf":false},{"name":"outpatient_control_summary_temp","leaf":false},{"name":"setl_item_info_init","leaf":false},{"name":"procreate_apply","leaf":false},{"name":"dip_treatment_diseases_score","leaf":false},{"name":"audit_exclude_content_item","leaf":false},{"name":"sys_dept","leaf":false},{"name":"audit_use_reason_dict","leaf":false},{"name":"disease_score_gz","leaf":false},{"name":"dip_dept_common_operation","leaf":false},{"name":"dip_drg_his_fee_collect_detail_省医","leaf":false},{"name":"respon_reac_doctor_audit","leaf":false},{"name":"pj3_offsite","leaf":false},{"name":"dip_drg_his_fee_collect_detail_原dev","leaf":false},{"name":"dict_drug","leaf":false},{"name":"sys_user_1","leaf":false},{"name":"pj3_gz_worker_salvage","leaf":false},{"name":"info_first_special_outpatient","leaf":false},{"name":"dongyin_socre","leaf":false},{"name":"provincial_local_20231017原dev","leaf":false},{"name":"dip_disease_score_national_clinical","leaf":false},{"name":"xxl_job_log_report","leaf":false},{"name":"outpatient_control_medical_type_config","leaf":false},{"name":"doctor_oa_info","leaf":false},{"name":"dip_bed_day_disease_lib","leaf":false},{"name":"t_refund_province_inside_copy1","leaf":false},{"name":"dm_out_self_visit_record","leaf":false},{"name":"t_refund_employment_injury","leaf":false},{"name":"briefing_wechat_msg","leaf":false},{"name":"out_settlement_drug","leaf":false},{"name":"cndrgs_temp_operation","leaf":false},{"name":"medical_5203_out_param_setlinfo","leaf":false},{"name":"dm_liquidation_gz_ip","leaf":false},{"name":"his_temp_ip_change_dept","leaf":false},{"name":"doctor_receive_info_log","leaf":false},{"name":"knowledge_base_manage_comment_reply","leaf":false},{"name":"discharge_drug","leaf":false},{"name":"detail_level_province_inside_maternity_outpatient","leaf":false},{"name":"ba_temp_operation","leaf":false},{"name":"basic_data_medical_team_info","leaf":false},{"name":"in_hospital_guest_info","leaf":false},{"name":"dws_report_gz_op","leaf":false},{"name":"disease_score_gz_price","leaf":false},{"name":"dip_special_item_score_detail_history","leaf":false},{"name":"dws_cal_report_ba_pi_ip","leaf":false},{"name":"three_level_v2_worker_ssk","leaf":false},{"name":"rules_qms_line","leaf":false},{"name":"his_temp_ip_patient_diagnosis","leaf":false},{"name":"medical_5262_out_param_result","leaf":false},{"name":"custom_in_zsyf_sum_dev20231119","leaf":false},{"name":"drgs_drg_标准","leaf":false},{"name":"sys_dict_kind_8月8号备份","leaf":false},{"name":"rules_drug_line_limit_use_drug","leaf":false},{"name":"dwm_report_pi_ip_match_his","leaf":false},{"name":"setl_zero_report_list","leaf":false},{"name":"MedicarePlatform4101SetlInfo","leaf":false},{"name":"out_special_disease_right","leaf":false},{"name":"cndrgs_temp_visit","leaf":false},{"name":"ip_guest_info","leaf":false},{"name":"dip_chinese_dict_fee_kind","leaf":false},{"name":"dwm_his_op_settle_total","leaf":false},{"name":"view_his_in_patient_fee_item","leaf":false},{"name":"basic_data_echo_template","leaf":false},{"name":"settle_dict_ba_dept","leaf":false},{"name":"bot_base_association","leaf":false},{"name":"dm_out_self_diagnose","leaf":false},{"name":"xxl_job_user","leaf":false},{"name":"view_his_dict_item","leaf":false},{"name":"custom_in_zsyf_log","leaf":false},{"name":"setl_zb_cn_dise","leaf":false},{"name":"dwm_liquidation_gz_ip","leaf":false},{"name":"view_his_dict_out_patient","leaf":false},{"name":"cndrgs_temp_diagnose","leaf":false},{"name":"pj3_gz_country_salvage","leaf":false},{"name":"settle_ht_temp_ip_patient_diagnosis","leaf":false},{"name":"dict_monitor_consumables_work_injury_log","leaf":false},{"name":"info_province_special_outpatient","leaf":false},{"name":"excel_data_import_configuration","leaf":false},{"name":"dict_operation_catalogue","leaf":false},{"name":"ba_temp_patientvisit","leaf":false},{"name":"his_dict_operation","leaf":false},{"name":"fact_ip_dict_zhfx","leaf":false},{"name":"cndrgs_icd9","leaf":false},{"name":"config_custom_level_copy2","leaf":false},{"name":"yibo_audit_rules_compose","leaf":false},{"name":"drgs_disease_point_标准CHS-1.0","leaf":false},{"name":"web_qms_json","leaf":false},{"name":"setl_blood_info_log","leaf":false},{"name":"detail_level_province_outside_country","leaf":false},{"name":"medicalrecord_rules_info","leaf":false},{"name":"setl_dict_info","leaf":false},{"name":"t_refund_worker_suisuikang","leaf":false},{"name":"dict_score_lib_extended_opcode","leaf":false},{"name":"dict_monitor_import","leaf":false},{"name":"fact_disease_jg","leaf":false},{"name":"setl_item_info","leaf":false},{"name":"info_province_inside","leaf":false},{"name":"info_nansha_second_special_outpatient","leaf":false},{"name":"xxl_job_logglue","leaf":false},{"name":"dict_monitor_medicine_name_work_injury_log","leaf":false},{"name":"in_hospital_patient","leaf":false},{"name":"log_xml_param","leaf":false},{"name":"bi_basicdata_special_item","leaf":false},{"name":"dict_monitor_item_children_log","leaf":false},{"name":"daily_out_patient_month_usage","leaf":false},{"name":"self_settlement_drug","leaf":false},{"name":"surgery_charge_fee_item_s01","leaf":false},{"name":"drgs_drg","leaf":false},{"name":"dip_chinese_diagnosis_dict","leaf":false},{"name":"settlement_platform_zdxx","leaf":false},{"name":"doctor_lib_info_gj6","leaf":false},{"name":"xxl_job_registry","leaf":false},{"name":"his_dict_doctor_db","leaf":false},{"name":"out_output_message","leaf":false},{"name":"dict_operation","leaf":false},{"name":"his_dict_department_db","leaf":false},{"name":"settle_view_inpatient_balanceinfo","leaf":false},{"name":"settle_supplement_oper","leaf":false},{"name":"medical_5203_in_param","leaf":false},{"name":"setl_pay_info","leaf":false},{"name":"pre_use_reason","leaf":false},{"name":"country_public_service_item","leaf":false},{"name":"setl_blood_info_4103","leaf":false},{"name":"briefing_report","leaf":false},{"name":"yibo_rules_formula_info","leaf":false},{"name":"config_frequency_project","leaf":false},{"name":"surgery_charge_use_reason_s01","leaf":false},{"name":"setl_pay_info_compare_bak","leaf":false},{"name":"op_day_reconciliation_settle","leaf":false},{"name":"t_refund_country_serious","leaf":false},{"name":"out_settlement_output_message","leaf":false},{"name":"audit_his_web_service_log","leaf":false},{"name":"dip_catalogue_data","leaf":false},{"name":"disease_refined_special_disease_compare_dept","leaf":false},{"name":"drgs_mcc_cc_jintang","leaf":false},{"name":"t_reconciliation_dict_settlementtype","leaf":false},{"name":"three_level_v2_employment_injury","leaf":false},{"name":"his_temp_pay_method","leaf":false},{"name":"surgery_charge_output_message_s01","leaf":false},{"name":"dict_medicare","leaf":false},{"name":"cndrgs_grouping_results","leaf":false},{"name":"setl_dise_info_4103","leaf":false},{"name":"detail_level_province_inside_country_outpatient","leaf":false},{"name":"t_free_medicare_payment_manage","leaf":false}]}]`;
    export default {
        data() {
            return {
                treeProps: {
                    showLine: true,
                    showLabelLine: true,
                    expandIconIndent: 16,
                },
                data: JSON.parse(treeData),
                defaultProps: {
                    children: 'children',
                    label: 'name',
                },
            };
        },
        methods: {
            openEdit(node) {
                console.log(node);
            },
            treeLoad(node, resolve) {
                if (node.level === 0) {
                    return resolve(this.data);
                }
                if (node.level === 1) {
                    return resolve(node.data[this.defaultProps.children]);
                }
                setTimeout(() => {
                    resolve(
                        new Array(1000).fill(1).map((item, i) => {
                            return {
                                name: `${node.label}-${i + 1}`,
                                leaf: true,
                            };
                        })
                    );
                }, 500);
            },
        },
    };
</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
显示 复制

# 插槽的使用

  • 自定义整行节点 label 区域插槽名称："default"，如果添加了会使 "node-label"和"after-node-label"无效
  • 显示横线时自定义节点 label 区域插槽名称："node-label"
  • 显示横线时追加在横线右边的内容插槽名称："after-node-label"

在插槽放入 el-button 时 ，可以给按钮添加 yb-grey-action-button 类名

一级 1
一级 2
二级 2-1 很长的的label 截断展示试试的 很长的的label 截断展示试试的,很长的的label 截断展示试试的,很长的的label
二级 2-2
一级 3
二级 3-1 很长的的label 截断展示试试的 很长的的label 截断展示试试的,很长的的label 截断展示试试的,很长的的label6767767
二级 3-2 
<template>
    <div style="width:500px">
        <yb-tree
            ref="tree"
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
            :labelTooltipConfig="{placement:'top'}"
        >
            <!-- 自定义tooltip的内容 -->
            <template #node-label-tooltip="{data,node}">
                <div style="margin-bottom:8px">label：{{node.label}}</div>
                <div style="margin-bottom:8px">id：{{data.id}}</div>
            </template>
            <!-- 显示横线时追加在横线右边的内容 -->
            <template v-slot:node-label="{node}">
                <!-- label 需要放进有 classnName 为'el-tree-node__label'的盒子里，labelTooltip 才会有效 -->
                <span class="el-tree-node__label" style="font-size:14px;"
                    >{{node.label}}<i
                        class="el-icon-star-on
"
                    ></i
                ></span>
            </template>
            <!-- 显示横线时追加在横线右边的内容 -->
            <template v-slot:after-node-label="{node,data}">
                <!-- 给按钮添加 yb-grey-action-button 类名 -->
                <el-button
                    class="yb-grey-action-button"
                    size="mini"
                    icon="el-icon-copy-document"
                    @click.stop
                ></el-button>
                <el-dropdown
                    size="medium"
                    placement="bottom-start"
                    @command="handleDropdown($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">
                        <!-- 使用 yb-dropdown-menu-title 类名 -->
                        <div class="yb-dropdown-menu-title">
                            {{ node.label }}
                        </div>
                        <template>
                            <el-dropdown-item
                                icon="el-icon-copy-document"
                                command="copy"
                                >复制</el-dropdown-item
                            >
                            <el-dropdown-item
                                icon="el-icon-delete"
                                command="delete"
                                >删除</el-dropdown-item
                            >
                        </template>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
        </yb-tree>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                data: [
                    {
                        id: 1,
                        label: '一级 1',
                        children: [
                            {
                                id: 4,
                                label: '二级 1-1',
                                children: [
                                    {
                                        id: 9,
                                        label: '三级 1-1-1',
                                    },
                                    {
                                        id: 10,
                                        label: '三级 1-1-2',
                                    },
                                ],
                            },
                            {
                                id: 9000,
                                label: '二级 1-2',
                            },
                        ],
                    },
                    {
                        id: 2,
                        label: '一级 2',
                        children: [
                            {
                                id: 5,
                                label: '二级 2-1 很长的的label 截断展示试试的 很长的的label 截断展示试试的,很长的的label 截断展示试试的,很长的的label',
                            },
                            {
                                id: 6,
                                label: '二级 2-2',
                            },
                        ],
                    },
                    {
                        id: 3,
                        label: '一级 3',
                        children: [
                            {
                                id: 7,
                                label: '二级 3-1 很长的的label 截断展示试试的 很长的的label 截断展示试试的,很长的的label 截断展示试试的,很长的的label6767767',
                            },
                            {
                                id: 8,
                                label: '二级 3-2',
                            },
                        ],
                    },
                ],
                defaultProps: {
                    children: 'children',
                    label: 'label',
                },
            };
        },
        methods: {
            handleDropdown(command) {
                console.log(command);
            },
        },
    };
</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
显示 复制

# Props

参数 说明 类型 可选值 默认值
pageSize 每个节点一次最多只加载的子节点数量，超过这个数会出现“展开更多”的按钮 number - 100
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 需要放进有 classnName 为'el-tree-node__label'的盒子里，labelTooltip 才会有效 string|function 'always' | 'overflow'|'none'
labelTooltipConfig 对应 el-popover (opens new window)的属性 object {}
... 其他属性同 el-tree (opens new window) -- -- --

# Tree Methods

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

方法名称 说明 参数 返回值
getTree 取得 el-tree 的组件实例 - -

调用el-tree Methods (opens new window)的方法，调用方式应该是 this.$refs['tree'].getTree()['methodName']()

// 例如
this.$refs['tree'].getTree().getCurrentKey();
1
2

# Tree Events

事件是同 el-tree Events (opens new window)一致的

# 插槽

事件名称 说明 参数
default 自定义整行节点 label 区域插槽，优先级高于 node-label，after-node-label {data,node}
node-label 自定义节点 label 区域插槽，label 需要放进有 classnName 为'el-tree-node__label'的盒子里，labelTooltip 才会有效 {data,node}
after-node-label 显示横线时追加在横线右边的内容 {data,node}
node-label-tooltip 自定义鼠标移入节点名称时展示的浮窗内容 {data,node}
上次更新: 2024/10/12, 11:10:09
YbCardList 卡片列表
YbCascaderList 级联列表

← YbCascaderList 级联列表→

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