祖安之光
2025-07-16 f96b425b531a70c541b63b66f7b18c1d1b87fb1d
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,10 +246,33 @@
  }
  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);
@@ -266,7 +299,7 @@
  }else {
    loadingCompany.value = true;
    const queryParams = {
      pageSize: 10,
      pageSize: 100,
      pageNum: 1,
    }
    const res = await getCompany(queryParams)
@@ -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;