第八篇：当点击列表的时候展示当前类型下的数据，当在点击这个类型的时候展示全部的内容

点击类型出现下边的对应数据，在点击数据展示全部的内容

html代码

 <span style="margin-left:0px;border-radius:0px" :class="['overview-item', {'overview-item-active':item.value === overviewActive}]" plain v-for="(item,index) in typeList" :key="item.value" @click="clickChangeType(item,index)">{{ item.label }}</span>

js部分

typeList:[
          {
              value:1,
              label:'测试1',
          },
          {
              value:2,
              label:'测试2',
          },
          {
              value:3,
              label:'测试3',
          }
        ],
        // 点击赋值
        overviewActive:'',
        // 点击的类型
        category:''

clickChangeType(item,index){
      if(this.overviewActive == item.itemCode){
        this.overviewActive = ''
        this.formInline.stage = ''
         this.currentPage = 1
         this.getInfoPageList()
      }else{
        this.overviewActive = item.itemCode
        this.formInline.stage = item.itemCode
        this.currentPage = 1
        // 调用数据
        this.getInfoPageList()
        // console.log('this.overviewActive ',this.overviewActive )
      }
      // console.log('下标',item,index,this.overviewActive)
    },

css部分

.overview-item:not(:last-child){
  border-right-color: transparent;
}
.overview-item{
  display: inline-block;
  font-size:12PX;
  height: 36PX;
  line-height: 36PX;
  text-align: center;
  padding: 0 20px;
  border: 1px solid #ddd;
  transition: all 0.3s;
  user-select: none;
  cursor: pointer;
  &:hover{
    border-color: #1890ff;
    color: #1890ff;
  }
  &.overview-item-active{
    border-color: #1890ff;
    color: #1890ff;
  }
}

最终效果

视频已上传