From b1bdaa3be6bc37ec2dea407eebf15a764172fdee Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期一, 14 七月 2025 09:55:23 +0800
Subject: [PATCH] 修改
---
src/views/build/conpanyFunctionConsult/qualityManage/rangeManage/range/index.vue | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 54 insertions(+), 1 deletions(-)
diff --git a/src/views/build/conpanyFunctionConsult/qualityManage/rangeManage/range/index.vue b/src/views/build/conpanyFunctionConsult/qualityManage/rangeManage/range/index.vue
index 2b4356f..e480e98 100644
--- a/src/views/build/conpanyFunctionConsult/qualityManage/rangeManage/range/index.vue
+++ b/src/views/build/conpanyFunctionConsult/qualityManage/rangeManage/range/index.vue
@@ -42,7 +42,17 @@
node-key="id"
:current-node-key="currentSelectedKey"
@node-click="handleNodeClick"
- ></el-tree>
+ >
+ <template #default="{ node,data }">
+ <el-tooltip
+ :content="data.mess"
+ placement="bottom"
+ :disabled="!isTextOverflow(data)"
+ >
+ <span class="tree-text">{{ data.mess }}</span>
+ </el-tooltip>
+ </template>
+ </el-tree>
</div>
<el-empty v-else description="暂无数据" />
</div>
@@ -236,6 +246,29 @@
}
loading.value = false;
}
+const textMeasureRef = ref(null);
+const getMeasureElement = () => {
+ if (!textMeasureRef.value) {
+ const el = document.createElement('span');
+ el.className = 'text-measure-element';
+ el.style.cssText = `
+ position: absolute;
+ visibility: hidden;
+ white-space: nowrap;
+ font-size: 14px; /* 匹配实际字体大小 */
+ `;
+ document.body.appendChild(el);
+ textMeasureRef.value = el;
+ }
+ return textMeasureRef.value;
+};
+// 判断文本是否溢出
+const isTextOverflow = (text) => {
+ const measureEl = getMeasureElement();
+ measureEl.textContent = text.mess;
+ return measureEl.scrollWidth > 300; // 180px 是节点容器实际宽度
+};
+
const handleTree = (val) => {
const traverse = (nodes, currentPath = '') => {
nodes.forEach((node, index) => {
@@ -597,6 +630,26 @@
:deep(.el-tree){
background: none;
}
+ :deep(.el-tooltip )
+ {
+ color: black;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ word-break: break-all;
+ white-space: nowrap;
+ }
+ .tree-text {
+ display: inline-block;
+ max-width: 300px; /* 根据实际容器宽度调整 */
+ white-space: nowrap; /* 强制不换行 */
+ overflow: hidden; /* 隐藏溢出 */
+ text-overflow: ellipsis; /* 显示省略号 */
+ }
+ /* 可选：移除el-tree默认的节点内边距 */
+ .el-tree-node__content {
+ padding-right: 5px;
+ }
+
.tree-container {
max-width: 600px;
margin-top: 20px;
--
Gitblit v1.9.2