vue 实现一行展示中，如果超出则中间省略号的布局方式

背景：在实际业务开发中，有个场景需要展示一条路线，但路线节点可能会过多，过多时，需要将中间的节点扣出，用省略号来表示。

实现：项目使用vue框架，js实现。

效果：一条路线中，至少要保留首尾2个节点，其他节点放不下则用省略号汇总替换。

图（1）一般情况下的效果：

 

 

图（2）只能放收尾2个节点，且末尾节点过长的情况：

 

图（3）只能放收尾2个节点，且首尾节点都过长的情况：

 

图（4）只能放收尾2个节点，且开始节点都过长的情况：

（ps: 这种情况下展示效果不是最佳，需要优化，但没想好方法，有好方案的欢迎补充共享）

 

 

 

代码块：

<template lang="pug">
.employeeList
  .box-wrap
    .list(:class="{'list_flex':list.length===2}")
      .item(v-for="(item,index) in list") 
        span.text {{item}}
        i.el-icon-right(v-if="index!==list.length-1")
        // 插入
        el-tooltip(v-if="index === insertIndex" effect="dark" placement="bottom")      
          .insert
            span {{"··· ( "+insertList.length+" )"}}
            i.el-icon-right
          .insertList(slot="content")
            .one(v-for="one in insertList") {{one}}
</template>
<script>
export default {
  data() {
    return {
      list: [
        "我第一个超级长***demo名demo名称名称名称名称名称名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称名称名称名称名称名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称名称名称名称名称名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称名称名称名称名称名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称名称名称名称名称名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称称1",
        // "demo名称名称名称名称名称名称1",
        "demo名称名称名称名称名称名称2",
        "demo名称名称名称名称名称名称3",
        "demo名称名称名称名称名称名称4",
        "demo名称5",
        "de6",
        "demo名称名称名称名称名称名称7",
        "demo名称名称名称名称名称名称8",
        "demo名称名称名称名称名称名称9",
        "demo名称名称名称名称名称名称10",
        "demo名称名称名称名称名称名称11",
        "demo名称名称名称名称名称名称12",
        "demo名称名称名称名称名称名称13",
        // "我最后一个超级长*****demo名称名称名称名称名称名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称13",
      ],
      insertIndex: 0,
      insertList: [],
    };
  },
  mounted() {
    this.deal();
  },
  methods: {
    deal() {
      let boxWidth = this.$el.querySelector(".box-wrap").offsetWidth - 32;
      let listWidth = this.$el.querySelector(".list").scrollWidth;
      if (listWidth > boxWidth) {
        let index = this.list.length - 2; // 倒数第二个
        if (index < 1) {
          return;
        }
        this.insertIndex = index - 1;
        this.insertList.unshift(this.list[index]);
        this.list.splice(index, 1);
        setTimeout(() => {
          let newListWidth = this.$el.querySelector(".list").scrollWidth;
          if (newListWidth > boxWidth) {
            this.deal();
          }
        });
      } else {
        console.log(this.insertList, this.list);
        return;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ * {
  box-sizing: border-box;
}
* {
  box-sizing: border-box;
}
.employeeList {
  background: #fff;
  height: 100%;
  .box-wrap {
    width: 100%;
    padding: 0 16px;
    .list {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      .item {
        line-height: 32px;
        font-size: 14px;
        display: inline-block;
        .el-icon-right {
          margin: 0 8px;
        }
        .insert {
          display: inline-block;
        }
      }
      &.list_flex {
        display: inline-flex;
        width: 100%;
        overflow: hidden;
        .item {
          display: inline-flex;
          overflow: hidden;
          align-items: center;
          // &:first-child {
          //   flex: 1;
          // }
          &:last-child {
            flex: 1;
            min-width: 40%;// 这个是导致只有收尾节点，末尾节点不够长，后面空白一段，展示效果不是最佳的原因
          }
          .text {
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>