Lösung für unvollständige Textanzeige im El-Tree

Überlauf: automatisch;
// oder overflow-x: auto;

<el-container id="Abteilung">
    <el-aside width="220px" id="drag-dept-left">
    </el-beiseite>
    <div id="dragBar-dept" class="dragBar"></div>
    <el-main id="ziehen-dept-rechts" Klasse="ziehen-rechts">
    </el-main>
</el-container>

.dragBar {
  Breite: 3px;
  Höhe: 100%;
  Hintergrund: #01e4fd;
  Cursor: elektronische Größenänderung;
}
.nach rechts ziehen {
  Polsterung rechts: 0px;
  Breite: berechnet (100 % – 213 Pixel);
}

montiert () {
    // Den Zoom-Schieberegler mit der entsprechenden Methodeneingabe (Schieberegler-ID, linke ID, rechte ID, äußere ID) einbinden
    dies.$_comFun.bindResize('dragBar-dept', 'drag-dept-links', 'drag-dept-rechts', 'dept')
  },

exportiere standardmäßig neuen Vuex.Store({
    Zustand: {
      // Ziehen Sie die Bildlaufleiste, um die Breite des inneren Divs zu ändern dragBar: false
    },
    Mutationen:
    },
    Aktionen: {
    },
    Module:
    }
})

Store aus „../index“ importieren

// Ziehen Sie den Maßstab, um die Breite des linken Divs zu ändern. Methode bindResize (barID, leftID, rightID, docID) {
    // Festlegen, ob die Flagge verschoben werden soll let removeFlag = false
    // Holen Sie sich das skalierte Div-Objekt auf der linken Seite let bar = document.getElementById(barID)
    let dragLeft = document.getElementById(leftID).style
    let dragRight = document.getElementById(rightID).style
    let doc = Dokument.getElementById(docID)
    let x = 0 // X- und Y-Achsenkoordinaten der Maus // Mount-Mausereignisse bar.addEventListener('mousedown', moveDownMouse, false)
    // Beachten Sie, dass die Bewegungs- und Mausfokusverlustereignisse an das DOM gebunden sein müssen. Wenn sie nur an die Leiste gebunden sind, sind sie nur wirksam, wenn sie sich bewegen/den Fokus auf der Leiste verlieren.doc.addEventListener('mousemove', mouseMove, false)
    doc.addEventListener('Maus hoch', Maus hoch, false)

    Funktion moveDownMouse (e) {
      entfernenFlag = wahr
      // Berechnen Sie die Koordinaten der aktuellen Maus und des Objekts nach dem Drücken des Elements x = e.clientX – bar.offsetWidth – dragLeft.width.replace('px', '')
      // Fokus erfassen, wenn „setCapture“ unterstützt wird // Ereignis festlegen // Ereignis binden, wenn (bar.setCapture) {
        bar.setCapture()
        bar.onmousemove = Funktion (ev) {
          Mausbewegung(ev || Ereignis)
        }
        bar.onmouseup = Maus hoch
      } anders {
        // bar.addEventListener('Mausbewegung', Mausbewegung, false)
        // bar.addEventListener('mouseup', Maus hoch, false)
      }
      // Verhindern, dass das Standardereignis eintritt e.preventDefault()
      store.state.dragBar = falsch
    }
    //Bewegungsereignisfunktion mouseMove (e) {
      wenn (entferneFlag) {
        // Das Universum ist im Betrieb unbesiegbar. let width = e.clientX - x
        wenn (Breite < 200) {
          dragLeft.width = "200px"
        } sonst wenn (Breite > 400) {
          dragLeft.width = "400px"
        } anders {
          dragLeft.width = Breite + 'px'
        }
        // Wenn die rechte Breite nicht berechnet wird, wird die Drag-Leiste gestaucht dragRight.width = 'calc(100% - ' + dragLeft.width + ')'
      }
    }
    //Stopp-Ereignisfunktion mouseUp () {
      entfernenFlag = false
      // Wenn ReleaseCapture unterstützt wird // Fokus freigeben // Ereignis entfernen // Ereignis deinstallieren if (bar.releaseCapture) {
        bar.releaseCapture()
        bar.onmousemove = bar.onmouseup = null
      } anders {
        // bar.removeEventListener('Mausbewegung', Mausbewegung, false)
        // bar.removeEventListener('mouseup', mouseUp, false)
      }
      store.state.dragBar = wahr
    }
}

<div id="DragBar"></div>

  montiert () {
    // Zoom-Dragbar mit der entsprechenden Methode einbinden (Dragbar-Objekt, ID des linken Div)
    this.bindResize(document.getElementById('dragBar'), 'Menü')
  },
  Methoden: {
   // Ziehen Sie den Maßstab, um die Breite des linken Divs zu ändern. Methode bindResize (bar, menu) {
     /* eslint-deaktivieren */
     // Holen Sie sich das skalierte Div-Objekt auf der linken Seite let els = document.getElementById(menu).style
     let x = 0 // X- und Y-Koordinaten der Maus jQuery(bar).mousedown(function (e) {
       // Nach dem Drücken des Elements die Koordinaten der aktuellen Maus und des Objekts berechnen x = e.clientX - bar.offsetWidth - jQuery('#' + menu).width()
       // Fokus erfassen, wenn „setCapture“ unterstützt wird // Ereignis festlegen // Ereignis binden, wenn (bar.setCapture) {
         bar.setCapture()
         bar.onmousemove = Funktion (ev) {
           Mausbewegung(ev || Ereignis)
         }
         bar.onmouseup = Maus hoch
       } anders {
         jQuery(Dokument).binden('Mausbewegung', Mausbewegung).binden('Maushoch', Maushoch)
       }
       // Verhindern, dass das Standardereignis eintritt e.preventDefault()
     })
     //Bewegungsereignisfunktion mouseMove (e) {
       // Das Universum befindet sich in einer superunbesiegbaren Berechnung els.width = e.clientX - x + 'px'
     }
     //Stopp-Ereignisfunktion mouseUp () {
       // Wenn ReleaseCapture unterstützt wird // Fokus freigeben // Ereignis entfernen // Ereignis deinstallieren if (bar.releaseCapture) {
         bar.releaseCapture()
         bar.onmousemove = bar.onmouseup = null
       } anders {
         jQuery(Dokument).aufheben('Mausbewegung', Mausbewegung).aufheben('Maushoch', Maushoch)
       }
     }
     /* eslint-aktivieren */
   }
  }

<el-tree ref="Baum" :data="treeMenus" :props="multiProps" :show-checkbox="true" :node-key="nodeId">
 <span class="span-ellipsis" slot-scope="{ Knoten, Daten }">
  <span :title="node.label">{{ node.label }}</span>
 </span>
</el-Baum>

.span-ellipsis {
  Breite: 100 %;
  Überlauf: versteckt;
  Leerzeichen: Nowrap;
  Textüberlauf: Auslassungspunkte;
}

.span-ellipsis {
  Breite: 100 %;
  Überlauf: versteckt;
  Leerzeichen: Nowrap;
  Textüberlauf: Auslassungspunkte;
  Anzeige: Block;
}