2020-05-14 解决 el-scrollbar 无法显示滚

前提条件：请先确保设置了样式使之能够产生滚动条件：

以面包屑导航设置的样式为例：

必须给el-scrollbar的父级设置高度才能使el-scrollbar具备滚动条件

.content{
   height:50px 
}

这里针对面包屑导航业务对 el-scrollbar 内部一些样式进行重置

/deep/ .el-scrollbar__wrap {
  width: calc(100% - 250px); //导航条宽度是动态计算的
  white-space: nowrap; // 必须设置不换行才能进行横向滚动
  overflow: hidden !important; //去除默认长的很丑的滚动条
}

/deep/  .el-breadcrumb__item {
    float: unset !important; // 面包屑导航每一项去除浮动
 }

如果到这里导航栏还不显示， 像我这样鼠标移动上去不显示滚动条：

可能是由于 el-scrollbar 无法及时监听到内部标签的宽度变化例如：我们使用 el-breadcrumb 面包屑来当浏览导航，当导航长度超出时，此时 el-scrollbar 无法监听到el-breadcrumb内部宽度的变化，无法产生滚动条

这里再以面包屑导航为例进行解决：

<div class='content'>
  <el-scrollbar v-if="showScroll">
    <el-breadcrumb>
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item,index) in levelList" :key="index">
                ...内部动态添加的内容省略
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </el-scrollbar>
</div>

重点来了！由于滚动条监测不到面包屑导航栏内部宽度变化，当内容超出时无法正常显示滚动条，所以监听导航标签数组的变化，让滚动条内部触发重新计算宽度。

export default {
  data() {
    return {
      showScroll: true
    };
  },
  watch: {
    levelList() {
      //由于滚动条监测不到面包屑导航栏内部宽度变化，当内容超出时无法正常显示滚动条，所以手动触发让滚动条内部重新计算宽度
      this.showScroll = false;
      this.$nextTick(() => {
        this.showScroll = true;
      });
    }
  },
}

完美解决，鼠标移动上去的效果：