ElementUI中el-scrollbar使用

关键代码： 

<el-scrollbar class="scrollbar">
      <div class="tags">
        <el-tag
          v-for="tag in tagsList"
          :key="tag.title"
          :closable="!tag.hideclose"
          :type="isActive(tag)"
          @close="handleCloseTag(tag)"
        >
          <router-link :to="tag.path" class="tag-title">{{ tag.title }}</router-link>
        </el-tag>
      </div>
</el-scrollbar>

  .scrollbar {
    width: 100%;//宽度需要为具体的大小
    .tags {
      display: flex;
      width: 1px; //这一行是关键，其值大小无所谓，但这个属性要有，且单位为px,不能是100%
      .el-tag {
        margin-left: 6px;
        .tag-title {
          color: black;
          padding: 8px 2px;
          text-decoration: none;
        }
      }
    }
  }

注意： width: 1px; 这一行是关键，其值大小无所谓，但这个属性要有，且单位为px,不能是100%

全部代码：

<template>
  <div class="_tag">
    <el-scrollbar class="scrollbar">
      <div class="tags">
        <el-tag
          v-for="tag in tagsList"
          :key="tag.title"
          :closable="!tag.hideclose"
          :type="isActive(tag)"
          @close="handleCloseTag(tag)"
        >
          <router-link :to="tag.path" class="tag-title">{{ tag.title }}</router-link>
        </el-tag>
      </div>
    </el-scrollbar>

    <el-dropdown @command="handleCloseBtn" class="_dropdown">
      <el-button type="primary" size="small">
        标签选项
        <i class="el-icon-caret-bottom el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="closeOther">关闭其它</el-dropdown-item>
        <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>


<script>
export default {
  data() {
    return {
      tagsList: [
        {
          title: "sadmasHome", //标签名
          name: "sadmasHome", //路由里的name对应vue页的name,标签列表里的name可以做vue页面缓存
          path: "/sadmas/home/sadmasHome", //路由
          hideclose: true, //是否隐藏关闭
        },
      ],
    };
  },
  mounted() {
    // this.setTags(this.$route);
    // console.log("this.$route:", this.$route);
  },
  methods: {
    //设置标签
    setTags(route) {
      const isExsit = this.tagsList.some((item) => {
        return item.path === route.fullPath;
      });
      if (isExsit == false) {
        this.tagsList.push({
          title: route.meta.title, //标签名
          name: route.name, //路由里的name对应vue页的name,标签列表里的name可以做vue页面缓存
          path: route.fullPath, //路由
          hideclose: route.meta.hideclose ? route.meta.hideclose : false, //是否隐藏关闭
        });
      }
    },
    //关闭标签
    handleCloseTag(tag) {
      this.tagsList.splice(this.tagsList.indexOf(tag), 1);
      // array.splice(index,howmany) 从索引为index处删除howmany个元素
      if (this.tagsList.length > 0) {
        this.$router.push(this.tagsList[this.tagsList.length - 1].path);
      } else {
        // this.$router.push("/index");
        this.$router.push({ name: "sadmasMain" });
      }
    },
    //关闭功能按钮
    handleCloseBtn(command) {
      if (command == "closeOther") {
        //关闭其它,保留没有删除的标签。find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
        var activeTag = this.tagsList.find((item) => {
          return item.path == this.$route.fullPath;
        }); //查找第一个满足的
        var noCloseTags = this.getNoCloseTabs();
        if (
          // some() 方法用于检测数组中的元素是否满足指定条件（函数提供）,some() 不会改变原始数组。如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。
          noCloseTags.some((item) => {
            return item.path == activeTag.path && item.title == activeTag.title;
          }) == false
        ) {
          //不包含
          noCloseTags = noCloseTags.concat(activeTag);
        }
        this.tagsList = noCloseTags;
      } else if (command == "closeAll") {
        //关闭所有,保留没有删除的标签
        this.tagsList = this.getNoCloseTabs();
        this.$router.push(this.tagsList[this.tagsList.length - 1].path);
      }
    },
    getNoCloseTabs() {
      //获取没有删除的标签
      var noCloseList = this.tagsList.filter((item) => {
        return item.hideclose == true;
      });
      return noCloseList;
    },
    //是否选中
    isActive(tag) {
      // console.log("tag.path", tag.path);
      // console.log("this.$route.fullPath", this.$route.fullPath);

      if (tag.path == this.$route.fullPath) {
        return "";
      } else {
        return "info";
      }
    },
  },
  watch: {
    //路由变化,设置标签
    // $route(newValue, oldValue) {
    //   this.setTags(newValue);
    // }
    $route: {
      handler(newValue, oldValue) {
        this.setTags(newValue);
        // console.log("this.$route:", this.$route);
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss">
._tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(116, 116, 116, 0.281);

  .scrollbar {
    width: 100%;
    margin-right: 6px;
    .tags {
      display: flex;
      width: 1px; //这一行是关键，其值大小无所谓，但这个属性要有，且单位为px,不能是100%
      .el-tag {
        margin-left: 6px;
        .tag-title {
          color: black;
          padding: 8px 2px;
          text-decoration: none;
        }
      }
    }
  }

  ._dropdown {
    height: 40px;

    display: flex;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.1) -3px 0px 15px 3px;
    padding: 0 5px;
    background-color: rgba(116, 116, 116, 0.329);
    .el-button--primary {
      background-color: #00561f;
    }
    .el-button {
      border: #00561f;
    }
  }
}
</style>

路由样式

效果图：