preliminary/src/components/TabPage.vue

<template>
  <div class="tab-wrap">
    <div class="tab" v-if="modlues&&modlues.length>0">
      <p v-for="(it,index) in modlues" :key="it.id">
        <span :class="{current:index==0}" v-if="type[it.type]==1">
          <i>{{index + 1  }}</i>
          {{it.name}}
        </span>
      </p> 
    </div>
    <!-- 内容 -->
    <div class="content">这里放明细</div>
  </div>
</template>
<script type="text/javascript">
  export default {
    name:'TabPage',
    data(){
      let sysConfig = this.$store.state.sysConfig;
      let allMoudles = this.$store.state.allMoudles;
      return{
        config:sysConfig,
        modlues:allMoudles,
        type:{
          "1":sysConfig.filter(item=>item.code=="symptoms_show")[0].value,
          "2":sysConfig.filter(item=>item.code=="diagnosis_show")[0].value,
          "3":sysConfig.filter(item=>item.code=="omhistory_show")[0].value,
          "4":sysConfig.filter(item=>item.code=="replenish_show")[0].value,
        }
      }
    },
    created(){
      console.log('配置信息：',this.config,'type',this.type)
    }
  }
</script>
<style lang="less" scoped>
  .tab-wrap{
    width: 100%;
    height: 100%;
    .tab{
      height: .82rem;
      line-height: .82rem;
      border-bottom: 1px solid #EDEDED;
      box-sizing: border-box;
      // padding: 0 .2rem;
      padding-top: .16rem;
      p{
        display: inline-block;
      }
      span{
        font-size: .24rem;
        display: inline-block;
        vertical-align: top;
        width:1.48rem;
        height: .5rem;
        line-height: .5rem;
        // background: #E5ECFC;
        // border-radius: 25px;
        // color: #0043E8;
        color: #7C828E;
        text-align: center;
        margin-left: .2rem;
        margin-right: .19rem;
      }
      .current{
        color: #0043E8;
        background: #E5ECFC;
        border-radius: 25px;
      }
    }
    .content{
      font-size: .3rem;
    }
  }
</style>