diff --git a/src/views/archivesManagement/archClass/archCatalogue/components/leftTree.vue b/src/views/archivesManagement/archClass/archCatalogue/components/leftTree.vue index 0d5d360..c7e5c68 100644 --- a/src/views/archivesManagement/archClass/archCatalogue/components/leftTree.vue +++ b/src/views/archivesManagement/archClass/archCatalogue/components/leftTree.vue @@ -165,7 +165,7 @@ export default { return text.length > this.getMaxLabelLength(); }, getMaxLabelLength() { - return 27; // 统一控制阈值 + return 100; // 统一控制阈值 }, // 获取左侧树列表 async getLeftTreeList() { @@ -248,9 +248,29 @@ export default { .node-label { flex: 1; min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + overflow: visible; + text-overflow: initial; + white-space: normal; /* 允许换行 */ + word-break: break-word; /* 长词断行 */ + line-height: 20px; +} + +/* 使行容器自适应高度并顶对齐,兼容多行文本 */ +.left-tree-list .el-tree-node__content { + display: flex; + align-items: flex-start; + height: auto; + min-height: 28px; + padding-top: 6px; + padding-bottom: 6px; + line-height: 20px; +} + +/* 高亮选中状态同样自适应高度 */ +.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { + height: auto !important; + align-items: flex-start; + line-height: 20px; } /* 选中节点的背景色 */ @@ -273,7 +293,9 @@ export default { .left-tree-list .el-tree-node__content:hover { background-color: #f5f5f5; } - +.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { + height: auto; +} /* 选中节点的悬停效果 */ .left-tree-list .el-tree-node.is-current>.el-tree-node__content:hover { background-color: #8cc8ff; @@ -290,4 +312,15 @@ export default { .left-tree-list .el-tree-node__content:hover .btn-box { opacity: 1; } + +::v-deep .el-tree-node__content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + height: auto; +}