| | |
| | | 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> |
| | |
| | | } |
| | | 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) => { |
| | | node.name = `${node.number} ${node.mess}`; |
| | | node.mess= `${node.number} ${node.mess}`; |
| | | // 递归处理子节点(传递当前序号路径) |
| | | if (node.children && node.children.length) { |
| | | traverse(node.children, node.number); |
| | |
| | | }else { |
| | | loadingCompany.value = true; |
| | | const queryParams = { |
| | | pageSize: 10, |
| | | pageSize: 100, |
| | | pageNum: 1, |
| | | } |
| | | const res = await getCompany(queryParams) |
| | |
| | | :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; |