方案一

常规思路，按照定宽，则直接设置宽度，超过的显示省略号即可。那么每次拖动的时候，都需要将左侧的宽度传递给nodeEllipis，通过内联样式改变对应的width

<div class="tree-content"
      v-loading="treeLoading"
      element-loading-text="Loading..."
      element-loading-spinner="el-icon-loading">
      <el-tree
        ref="tree"
        :props="props"
        :load="loadNode"
        :data="data"
        lazy
        highlight-current
        node-key="label">
        <div class="tree-node" slot-scope="{ node, data }">
          <span class="nodeEllipis" :title="node.label" :style="{width: `${width}px`}">
            <i :class="data.icon || 'el-icon-s-grid'"></i>
            <span draggable @dragstart="e => handleDragStart(node.label, e, node)">
              {{ node.label }}</span>
          </span>
        </div>
      </el-tree>
</div>

对应的样式为

.tree-content {
    height: calc(100% - 90px);
    overflow: auto;
    position: relative;
    .tree-node {
      .f-text-ellipis {
        width: 180px;
        display: inline-block;
        vertical-align: bottom;
      }
      .operation {
        position: absolute;
        right: 5px;
        display: inline-block;
        text-align: center;
        width: 20px;
        height: 20px;
      }
    }
}

但是这种方案会存在性能问题，树结构的每条数据都对应着一个nodeEllipis节点，这个节点的样式会由内联width传入。而且传参变多不易维护。

方案二

利用flex特性方案。

display为flex元素的子元素flex-item如果是自适应宽度时，flex-item内的子元素实现单行文本省略，需要给flex-item添加overflow:hidden样式。

该方案不需要传递width，是自适应宽度。上述代码变成如下：

<div class="tree-node" slot-scope="{ node, data }" @mouseenter.stop.prevent="_handlerMouseenter" @mouseleave.stop.prevent="_handlerMouseleave">
      <span class="f-text-ellipis nodeEllipis" :title="node.label"
      >
        <i :class="data.icon || 'el-icon-s-grid'"></i>
        <span draggable @dragstart="e => handleDragStart(node.label, e, node)">
          {{ node.label }}</span>
      </span>
    </div>

样式为：

.tree-content {
    height: calc(100% - 90px);
    overflow: auto;
    position: relative;
    .tree-node {
      display: flex; // 增加此行
      overflow: hidden; // 增加此行
      .f-text-ellipis {
        flex: 1;
        padding-right: 20px;
        display: inline-block;
        vertical-align: bottom;
      }
}

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情”

树结构动态宽度超出显示省略号

方案一

方案二