pbl-teacher-table/src/components/pages/test/examine/index.vue

<template>
  <div class="testExamine">
    <div class="testTit">
      <div class="teaLis">
        <div
          class="teal"
          @click="cutPage(2)"
          :class="[pType == 2 ? 'Tbor' : '']"
        >
          专任教师
        </div>
        <div
          class="teal"
          @click="cutPage(1)"
          :class="[pType == 1 ? 'Tbor' : '']"
        >
          班主任
        </div>
      </div>
      <div style="margin-right: 100px;">
        <el-select v-model="cutTable" placeholder="请选择">
          <el-option
            v-for="item in cutTabOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="testCon">
      <targetPage :pType="pType" v-if="cutTable == 0"></targetPage>
      <personPage :pType="pType" v-if="cutTable == 1"></personPage>
    </div>
  </div>
</template>

<script>
import personPage from "./conpoments/personPage.vue";
import targetPage from "./conpoments/targetPage";

export default {
  components: {
    personPage,
    targetPage
  },
  data() {
    return {
      pType: 2,
      cutTable: 0,
      cutTabOpts: [
        {
          value: 0,
          label: "按指标"
        },
        {
          value: 1,
          label: "按人员"
        }
      ]
    };
  },
  methods: {
    cutPage(e) {
      this.pType = e;
    }
  }
};
</script>

<style scoped>
.testExamine {
  width: 100%;
  min-width: calc(150px * 10);
  min-height: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
}
.testExamine > .testTit {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.teaLis {
  display: flex;
}
.teal {
  padding: 10px 20px;
  cursor: pointer;
}
.Tbor {
  border-bottom: 2px rgba(54, 129, 252, 1) solid;
  font-weight: 600;
}
.testCon {
  box-sizing: border-box;
  padding: 20px;
}
</style>