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
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
显示 复制 复制
# 节点按需加载
这里展示只有第三级节点才做异步加载的案例,并且每个节点的子节点数量太多的情况加载会卡顿,这里使用 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
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
- 复制
- 删除
一级 1
一级 2
- 复制
- 删除
一级 2
二级 2-1 很长的的label 截断展示试试的 很长的的label 截断展示试试的,很长的的label 截断展示试试的,很长的的label
- 复制
- 删除
二级 2-1 很长的的label 截断展示试试的 很长的的label 截断展示试试的,很长的的label 截断展示试试的,很长的的label
二级 2-2
- 复制
- 删除
二级 2-2
一级 3
- 复制
- 删除
一级 3
二级 3-1 很长的的label 截断展示试试的 很长的的label 截断展示试试的,很长的的label 截断展示试试的,很长的的label6767767
- 复制
- 删除
二级 3-1 很长的的label 截断展示试试的 很长的的label 截断展示试试的,很长的的label 截断展示试试的,很长的的label6767767
二级 3-2
- 复制
- 删除
二级 3-2
label:
id:
<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
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
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/05/31, 11:14:59