页面按钮控制展示数据:
效果图:
点击已办队列对应的展示数据:

待办按钮展示数据效果图:

VUE页面代码:

<template>
  <div class="WRAP">
    <div class="main">
       <div class="save_box">
        <el-button type="primary" @click="onclickDaiBanHoliday()" v-if="bind">待办队列{{flowAmongNumBer}}</el-button>
        <el-button type="primary" @click="onclickYiBanHoliday()">已办队列{{flowStopNum}}</el-button>
      </div>
    </div>
  </div>
</template>

script代码:

<script>
import Stomp from 'stompjs'
export default {
  name: 'entry',
  data() {
    return {
      showTeacherDaiBanDiv:false,
      showTeacherYiBanDiv:false,
    };
  },
  methods: {
    getYiBanData(){
      this.$axios({
        url: "http://localhost:8088/teacher/queryTeacherHolidayYiBan",
        method: "post",
        data: { 
          flowAuditor: this.$route.query.userid,
           flowSatus: '0',
          }
       })
      .then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.tableYiBanData = res.data.data;
        }
      })
      .catch(error => {
        console.log(error);
      });
    },
     onclickYiBanHoliday(){
        this.showTeacherYiBanDiv = true; 
        this.showTeacherDaiBanDiv = false; 
        this.getYiBanData();
    },
     onclickDaiBanHoliday(){
         this.showTeacherDaiBanDiv = true; 
         this.showTeacherYiBanDiv = false; 
    }
   
  },
};
</script>

代码思路:
1.页面利用@click按钮，对应的数据展示要封装一层DIV 然后利用VUE的v-show来进行操作
先初始化都不显示，点击按钮触发然后给上true(false是不展示)，然后把不要的数据展示给flase掉
2.数据展示控制做完之后就开始掉method方法进行请求.axios