手写 tab切换

294 阅读1分钟

样式如下

image.png

<div class="clearfix"  style="margin-bottom: 20px">
  <div class="invoicingType" :class="{ typeChange:typeValue === 1 }" @click="typeChange1">
    我的业绩
  </div>

  <div class="invoicingType" :class="{ typeChange:typeValue === 2 }" @click="typeChange2">
    部门业绩
  </div>
</div>

methods

typeChange1() {
  this.typeValue = 1 //用于判断tab
  this.getData()//调用获取表格数据
},
typeChange2() {
  this.typeValue = 2
  this.getData()
},

css

.invoicingType {
  float: left;
  margin-right: 50px;
  font-weight: 600;
  padding-bottom: 15px;
  cursor: pointer;
}
.typeChange {
  color: #409EFF;
  border-bottom: 3px solid #409EFF;
}

与其担心未来,不如努力现在。成功的路上,只有奋斗才能给自己安全感。不要轻易把梦想寄托在某个人身上,也不要太在乎身旁的耳语,因为未来是你自己的,只有你自己能给自己最大的安全感。