drp-ui/src/views/ctyc/info/approvalMain.vue

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" >
      <el-tab-pane :label="num1" name="approval"></el-tab-pane>
      <el-tab-pane :label="num2" name="approved"></el-tab-pane>
    </el-tabs>
    <component :is="currentPage"></component>
  </div>
</template>

<script>
import { listInfo } from "@/api/ctyc/info";
import approval from '@/views/ctyc/info/approval';
import approved from '@/views/ctyc/info/approved';
export default {
  name: "tabs",
  data() {
    return {
      num1: '',
      num2: '',
      queryParams1: {
        status: 0,
      },
      queryParams2: {
        status: 1,
      },
      activeName: 'approval' // 默认激活第一个标签
    };
  },
  created() {
    listInfo(this.queryParams1).then(response => {
      // 
      this.num1 = "待审阅 ("+response.total+")";
    });
    listInfo(this.queryParams2).then(response => {
      this.num2 = "已审阅 ("+response.total+")";
    });
  },
  methods: {
    
  },
  components:{
    approval,
    approved
  },
  computed: {
    // 计算属性返回当前应该显示的组件
    currentPage() {
      return this.activeName;
    }
  }
};
</script>