platformFront/src/components/basicKnow/TreeTab.vue

<template>
  <div class="tabList">
    <ul class="clearfix">
      <li :class="{'curTab':curId==item.id}" 
        @click="()=>handleTabClick(item.id)" 
        v-for="item in tab" :key="item.id"
      >{{item.name}}<span v-if="curId==item.id"></span></li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      curId:'1',
        tab:[
          {name:'化学物质类别',id:'1'},
          {name:'治疗学类别',id:'2'},
          {name:'药理学类别',id:'3'},
          {name:'解剖学类别',id:'4'},
          {name:'实验室检查类别',id:'7'},
          {name:'辅助检查类别',id:'8'},
        ],
    }
  },
  mounted(){
    let elSide = document.querySelector('.el-aside'),tabWidth = document.querySelector('.tabList');
    window.onresize = function(){
      tabWidth = document.querySelector('.tabList')
      tabWidth.style.left = elSide.offsetWidth+20+'px'
    }
    tabWidth.style.left = elSide.offsetWidth+20+'px'
  },
  methods:{
      handleTabClick(id){
        this.curId = id
        this.$emit('getTreeList',id)
      },
  }
}
</script>
<style lang="less" scoped>
.tabList {
  position: fixed;
  top: 100px;
  right: 20px;
  left: 270px;
  z-index: 10;
  border-top: 10px solid #dee2ea;
  border-bottom: 10px solid #dee2ea;
  box-sizing: border-box;
  ul {
      background-color: #fff;
    li {
      float: left;
      height: 60px;
      line-height: 60px;
      margin: 0 15px;
      box-sizing: border-box;
      cursor: pointer;
      position: relative;
      span {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #21CBC7;
      }
    }
    .curTab {
        color: #48C5D7;
    }
  }
}
</style>