Tabs 标签页

<template>
<div id="contaion">
<better-scroll ref="scroll" :scrollY="true" height="99%" :data="dataList">
<div style="min-height: 100%; display: flex; justify-content: space-between;" class="box-header">
    <div style="display: flex; align-items: center; margin-left: 20%;">
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="我的记录" name="first"></el-tab-pane>
        </el-tabs>
      </template>
    </div>
    <div style="display: flex; align-items: center; margin-right :20%">
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="我的下级" name="second"></el-tab-pane>
        </el-tabs>
      </template>
    </div>
  </div>
  <div style="min-height:100%" v-show="showMyRecords">
  </div>
  <div style="min-height:100% width: 100%;" v-show="showMySubordinates">
    <div class="box-header">
      <div style="width: 100%;">
        <div class="box-heard-time" style="padding-right: 0px;">
          <div style="width: 50%;    margin-left: -45px;">
            <span>
              <clockin ref="clockin" style=" font-weight: 600; color: #030303; font-size: 14px" @isUpdate="setParam">
                请选择部门</clockin>
            </span>
          </div>
          <!-- <div style="padding-top: 2px; ">

            <van-icon v-if="checkLastMonth" name="arrow-left" @click="handleChangeTime(1)" />
            <van-icon v-else color="#e8e8e8" name="arrow-left" />
          </div> -->
          <TimePicker ref="time_picker" @isUpdate="setParam"></TimePicker>
          <div style="    margin-left: -65px; margin-right: -65px; font-weight: 600; color: #030303; font-size: 14px">
            <!-- {{ dateNow }} -->
          </div>
          <!-- <div style="padding-top: 2px">
            <van-icon name="arrow" @click="handleChangeTime(2)" />
          </div> -->
        </div>
      </div>
    </div>
    <EmployeeSchedule ref="employee_schedule">
    </EmployeeSchedule>
  </div>
   </better-scroll>
   </div>
</template>
data() {
return {
activeName: 'first',//first
  showMyRecords: true,
  showMySubordinates: true,
  }
 },
methods: {
  	 setParam(name, value) {
      if (value.state == 'data') {
        this.$refs[name].param = value.val
      }
      else {
        this.$refs[name].loading = value.val
      }
    },
	handleClick(tab, event) {
      if (tab.name === 'first') {
        this.showMyRecords = true;
        this.showMySubordinates = false;
      } else if (tab.name === 'second') {
        this.showMyRecords = false;
        this.showMySubordinates = true;
      }
    },
}
</script>
<style lang="less" scoped>
#contaion {
  width: 100%;
  height: 90vh;
  /* background: #eeeeee7c; */
  background: rgba(238, 238, 238, 0.411);
}

#contaion {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

#contaion::-webkit-scrollbar {
  display: none;
}
.box-header {
  height: 40px;
  display: flex;
  flex-direction: row;
  line-height: 40px;
  justify-content: space-between;
  margin-top: 10px;
  background: #ffffff;
}
	</style>