Solution to incomplete text display in el-tree

overflow:auto;
// or overflow-x: auto;

<el-container id="dept">
    <el-aside width="220px" id="drag-dept-left">
    </el-aside>
    <div id="dragBar-dept" class="dragBar"></div>
    <el-main id="drag-dept-right" class="drag-right">
    </el-main>
</el-container>

.dragBar {
  width: 3px;
  height: 100%;
  background: #01e4fd;
  cursor: e-resize;
}
.drag-right {
  padding-right: 0px;
  width: calc(100% - 213px);
}

mounted () {
    // Mount the zoom slider with the corresponding method input (slider ID, left ID, right ID, outer ID)
    this.$_comFun.bindResize('dragBar-dept', 'drag-dept-left', 'drag-dept-right', 'dept')
  },

export default new Vuex.Store({
    state: {
      // Drag the scroll bar to change the inner div width dragBar: false
    },
    mutations:
    },
    actions: {
    },
    modules:
    }
})

import store from '../index'

// Drag the scale bar to change the width of the left div method bindResize (barID, leftID, rightID, docID) {
    // Set whether to move the flag let removeFlag = false
    // Get the scaled div object on the left let bar = document.getElementById(barID)
    let dragLeft = document.getElementById(leftID).style
    let dragRight = document.getElementById(rightID).style
    let doc = document.getElementById(docID)
    let x = 0 // X and Y axis coordinates of the mouse // Mount mouse events bar.addEventListener('mousedown', moveDownMouse, false)
    // Note that the movement and mouse focus loss events need to be bound to the DOM. If it is only bound to the bar, it will only be effective when it moves\loses focus on the bar.doc.addEventListener('mousemove', mouseMove, false)
    doc.addEventListener('mouseup', mouseUp, false)

    function moveDownMouse (e) {
      removeFlag = true
      // Calculate the coordinates of the current mouse and object after pressing the element x = e.clientX - bar.offsetWidth - dragLeft.width.replace('px', '')
      // Capture focus when setCapture is supported // Set event // Bind event if (bar.setCapture) {
        bar.setCapture()
        bar.onmousemove = function (ev) {
          mouseMove(ev || event)
        }
        bar.onmouseup = mouseUp
      } else {
        // bar.addEventListener('mousemove', mouseMove, false)
        // bar.addEventListener('mouseup', mouseUp, false)
      }
      // Prevent the default event from happening e.preventDefault()
      store.state.dragBar = false
    }
    //Move event function mouseMove (e) {
      if (removeFlag) {
        // The universe is invincible in operation. let width = e.clientX - x
        if (width < 200) {
          dragLeft.width = '200px'
        } else if (width > 400) {
          dragLeft.width = '400px'
        } else {
          dragLeft.width = width + 'px'
        }
        // If the right width is not calculated, the drag bar will be squeezed dragRight.width = 'calc(100% - ' + dragLeft.width + ')'
      }
    }
    //Stop event function mouseUp () {
      removeFlag = false
      // When releaseCapture is supported // Release focus // Remove event // Uninstall event if (bar.releaseCapture) {
        bar.releaseCapture()
        bar.onmousemove = bar.onmouseup = null
      } else {
        // bar.removeEventListener('mousemove', mouseMove, false)
        // bar.removeEventListener('mouseup', mouseUp, false)
      }
      store.state.dragBar = true
    }
}

<div id="dragBar"></div>

  mounted () {
    // Mount the zoom drag bar with the corresponding method input (drag bar object, ID of the left div)
    this.bindResize(document.getElementById('dragBar'), 'menu')
  },
  methods: {
   // Drag the scale bar to change the width of the left div method bindResize (bar, menu) {
     /* eslint-disable */
     // Get the scaled div object on the left let els = document.getElementById(menu).style
     let x = 0 // X and Y coordinates of the mouse jQuery(bar).mousedown(function (e) {
       // After pressing the element, calculate the coordinates of the current mouse and the object x = e.clientX - bar.offsetWidth - jQuery('#' + menu).width()
       // Capture focus when setCapture is supported // Set event // Bind event if (bar.setCapture) {
         bar.setCapture()
         bar.onmousemove = function (ev) {
           mouseMove(ev || event)
         }
         bar.onmouseup = mouseUp
       } else {
         jQuery(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp)
       }
       // Prevent the default event from happening e.preventDefault()
     })
     //Move event function mouseMove (e) {
       // The universe is in super invincible calculation els.width = e.clientX - x + 'px'
     }
     //Stop event function mouseUp () {
       // When releaseCapture is supported // Release focus // Remove event // Uninstall event if (bar.releaseCapture) {
         bar.releaseCapture()
         bar.onmousemove = bar.onmouseup = null
       } else {
         jQuery(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp)
       }
     }
     /* eslint-enable */
   }
  }

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

.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}