el-tree での不完全なテキスト表示の解決策

オーバーフロー:自動;
// または 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-コンテナ>

.ドラッグバー{
  幅: 3px;
  高さ: 100%;
  背景: #01e4fd;
  カーソル: e-resize;
}
.右ドラッグ{
  右パディング: 0px;
  幅: calc(100% - 213px);
}

マウントされた（）{
    // 対応するメソッド入力（スライダー ID、左 ID、右 ID、外側 ID）を使用してズーム スライダーをマウントします。
    this.$_comFun.bindResize('dragBar-dept', 'drag-dept-left', 'drag-dept-right', 'dept')
  },

デフォルトの新しいVuex.Storeをエクスポートします({
    州： {
      // スクロールバーをドラッグして内側の div の幅を変更します dragBar: false
    },
    突然変異:
    },
    アクション: {
    },
    モジュール:
    }
})

'../index' からストアをインポートします

// スケールバーをドラッグして左のdivの幅を変更します。メソッドbindResize(barID, leftID, rightID, docID){
    // フラグを移動するかどうかを設定します。let removeFlag = false
    // 左側のスケールされた div オブジェクトを取得します。let bar = document.getElementById(barID)
    左ドラッグ = document.getElementById(leftID).style
    右ドラッグ = document.getElementById(rightID).style
    doc = document.getElementById(docID) とします。
    let x = 0 // マウスのX軸とY軸の座標 // マウスイベントをマウント bar.addEventListener('mousedown', moveDownMouse, false)
    // 移動とマウスのフォーカス喪失イベントは DOM にバインドする必要があることに注意してください。バーにのみバインドされている場合は、バー上でフォーカスが移動\喪失したときにのみ有効になります。doc.addEventListener('mousemove', mouseMove, false)
    doc.addEventListener('mouseup', mouseUp, false)

    関数moveDownMouse(e) {
      削除フラグ = true
      // 要素を押した後の現在のマウスとオブジェクトの座標を計算します x = e.clientX - bar.offsetWidth - dragLeft.width.replace('px', '')
      // setCapture がサポートされている場合はフォーカスをキャプチャします // イベントを設定します // イベントをバインドします if (bar.setCapture) {
        bar.setCapture()
        bar.onmousemove = 関数 (ev) {
          マウス移動(ev || イベント)
        }
        bar.onmouseup = マウスアップ
      } それ以外 {
        // bar.addEventListener('mousemove', mouseMove, false)
        // bar.addEventListener('mouseup', mouseUp, false)
      }
      // デフォルトイベントの発生を防ぐ e.preventDefault()
      store.state.dragBar = false
    }
    //移動イベント関数mouseMove(e) {
      if (フラグを削除) {
        // 宇宙は操作上無敵です。let width = e.clientX - x
        幅<200の場合{
          ドラッグ左幅 = '200px'
        } それ以外の場合 (幅 > 400) {
          ドラッグ左幅 = '400px'
        } それ以外 {
          dragLeft.width = 幅 + 'px'
        }
        // 右の幅が計算されていない場合、ドラッグバーは圧縮されます dragRight.width = 'calc(100% - ' + dragLeft.width + ')'
      }
    }
    //イベント関数mouseUp()を停止{
      削除フラグ = false
      // releaseCapture がサポートされている場合 // フォーカスを解放 // 削除イベント // アンインストールイベント if (bar.releaseCapture) {
        bar.releaseCapture()
        bar.onmousemove = bar.onmouseup = null
      } それ以外 {
        // bar.removeEventListener('mousemove', mouseMove, false)
        // bar.removeEventListener('mouseup', mouseUp, false)
      }
      store.state.dragBar = true
    }
}

<div id="ドラッグバー"></div>

  マウントされた（）{
    // 対応するメソッド入力（ドラッグ バー オブジェクト、左の div の ID）を使用してズーム ドラッグ バーをマウントします。
    this.bindResize(document.getElementById('dragBar'), 'menu')
  },
  メソッド: {
   // スケールバーをドラッグして左のdivの幅を変更します。メソッドbindResize(bar, menu){
     /* eslint を無効にする */
     // 左側のスケールされた div オブジェクトを取得します。let els = document.getElementById(menu).style
     let x = 0 // マウスのX座標とY座標 jQuery(bar).mousedown(function (e) {
       // 要素を押した後、現在のマウスとオブジェクトの座標を計算します x = e.clientX - bar.offsetWidth - jQuery('#' + menu).width()
       // setCapture がサポートされている場合はフォーカスをキャプチャします // イベントを設定します // イベントをバインドします if (bar.setCapture) {
         bar.setCapture()
         bar.onmousemove = 関数 (ev) {
           マウス移動(ev || イベント)
         }
         bar.onmouseup = マウスアップ
       } それ以外 {
         jQuery(ドキュメント).bind('mousemove', mouseMove).bind('mouseup', mouseUp)
       }
       // デフォルトイベントの発生を防ぐ e.preventDefault()
     })
     //移動イベント関数mouseMove(e) {
       // 宇宙は超無敵の計算中 els.width = e.clientX - x + 'px'
     }
     //イベント関数mouseUp()を停止{
       // releaseCapture がサポートされている場合 // フォーカスを解放 // 削除イベント // アンインストールイベント if (bar.releaseCapture) {
         bar.releaseCapture()
         bar.onmousemove = bar.onmouseup = null
       } それ以外 {
         jQuery(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp)
       }
     }
     /* eslint を有効にする */
   }
  }

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

.span-ellipsis {
  幅: 100%;
  オーバーフロー: 非表示;
  空白: ラップなし;
  テキストオーバーフロー: 省略記号;
}

.span-ellipsis {
  幅: 100%;
  オーバーフロー: 非表示;
  空白: ラップなし;
  テキストオーバーフロー: 省略記号;
  表示: ブロック;
}