Solution to incomplete text display in el-tree

Method 1: The simplest way to set a horizontal scroll bar
Method 2 (new): Add a drag bar to change the width of the outer container
Method 2 (old): Add a drag bar to change the width of the outer container
Method 3: Use ... to indicate that the full name will be displayed when the mouse is moved over

When using the el-tree component of element ui, the following problems often occur:

When el-tree is rendered, the length of the text content is inconsistent, resulting in the inability to display the entire text that is too long.

After trying, we found the following three solutions, and method three is recommended.

Method 1: The simplest way to set a horizontal scroll bar

Effect:

Set the style on the span tag of the current tree node

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

question:

Because only when the overflow is set in the innermost span layer can the display of the excess part be effectively controlled, resulting in the appearance of horizontal scroll bars for multiple extra-long parts of text, which is a bit ugly. Even if you add overflow to the upper label layer, it is still ugly. So the problem is not solved. Next

Method 2 (new): Add a drag bar to change the width of the outer container

Effect:

Code:

Note that the id binding of the four parts is enough.

<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>

css is for reference only, modify the width control by yourself

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

js call

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')
  },

js global variables

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

js public methods

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
    }
}

Method 2 (old): Add a drag bar to change the width of the outer container

Effect:

Add a drag bar

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

After the current component is loaded, bind the event to the drag bar

  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 */
   }
  }

question:

The method is good, but it's a bit troublesome. What should I do if I just want a simple display and don't want to drag it around at all? Next

Method 3: Use ... to indicate that the full name will be displayed when the mouse is moved over

Effect:

process:

This is the first solution that comes to mind when encountering a problem, but it took me a lot of detours before I got on the right track.

Because there is no instruction on inserting title tag into node in the official el-tree document of element ui, I opened the source code and forced to write title="node.name" in the span tag of the corresponding node, but it was of no use.

Until I saw the custom node content, although the official example was used to insert and delete nodes, I could turn the click event into a hover event to display the full content of the node text.

Then when I choose to insert the scoped slot, I find that:

Finally ended this issue.

Code:

Use the el-tree component as follows:

<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>

Add styles to the span tag, using ... to indicate that the text is not fully displayed:

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

Additional notes:

If the .span-ellipsis style setting is invalid, you may need to add display: block; that is:

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

Because I use the el-tree component of element ui, the outer style of span defaults to display: flex; so there is no need to set the display property of span.

This is the end of this article about the solution to the problem of incomplete display of el-tree text. For more related content about incomplete display of el-tree text, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Element tree control integrates a drop-down menu with icons (tree+dropdown+input)
Interview must ask questions about Set implementation class: TreeSet
C++ implementation of KDTree with complete code
JDK collection source code analysis TreeMap (Part 2)
JDK collection source code analysis TreeMap (I)
Parsing ConcurrentHashMap: Red-black tree proxy class (TreeBin)
About the value transfer problem between antd tree and parent-child components (react summary)
C# TreeNode case study

<<: How to deal with the problem that the file is deleted but the space is not released in Linux

>>: mysql 8.0.18.zip installation and configuration method graphic tutorial (windows 64 bit)