vue之监听事件

<template>
  <div>
    <!-- tab分页 -->
    <div>
      <a-tabs default-active-key="test" @change="callback" type="card">
        <a-tab-pane key="test" tab="Test环境" force-render></a-tab-pane>
        <a-tab-pane key="staging" tab="Staging环境"></a-tab-pane>
      </a-tabs>
      <div style="margin: 20px 0px">
      <a-select
        style=" 250px"
        @change="get_department_id"
        placeholder="请选择部门"
        :value='select_option'>
        <a-select-option value="0">所有部门</a-select-option>
        <a-select-option
          :value="item.value"
          v-for="item in All_Department"
          :key="item.value"
          >{{ item.label }}</a-select-option>
      </a-select>
    </div>
</div>
    
    <a-spin v-if="state"  style='position:fixed;top:50%;left:50%;z-index:8;' tip="Loading...">
    </a-spin>
    <a-table
      :columns="columns"
      :data-source="selectDatas"
      :scroll="{ x: 1500, y: 500 }"
      :rowKey="(record) => record.id"
      class="tbl-report"
    >
    
      <span slot="action" slot-scope="record">
        <a slot="action" @click="toDetail(record.id)" style="margin-right: 5px"
          >详情</a
        >
        <a slot="action" @click="deleteReport(record.id)">删除</a>
      </span>
    </a-table>
    
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import { getUserId } from "../../utils/settoken";
import {
  getUserAuthRequest,
  getProjectRequest,
  deleteTestReport,
  testReportList,
  allDepartment,
} from "../../api";

const columns = [
  { title: "报告ID",  100, dataIndex: "indexId" },
  { title: "部门名称",  100, dataIndex: "depart_id" },
  { title: "项目名称",  100, dataIndex: "pro_name" },
  { title: "执行环境",  100, dataIndex: "environment" },
  { title: "开始时间", dataIndex: "start_time",  100 },
  { title: "结束时间", dataIndex: "end_time",  100 },
  { title: "操作人", dataIndex: "fullname",  100 },
  {
    title: "操作",
    key: "operation",
    fixed: "right",
     100,
    scopedSlots: { customRender: "action" },
  },
];

export default {
  data() {
    return {
      data: [],
      selectData: [],
      selectDatas:[],
      All_Department: [],
      columns,
      state:false,
      select_option:"0",
      env:"test",
    };
  },
  mounted() {
    this.handle();
    this.getAllDepartment();
  },
  watch:{
    env:function(newVal,oldVal){
      this.select_option="0"
      console.log("环境发生变化");
      console.log(newVal +"---"+oldVal);

    }

  },
  methods: {
    async handle(e = "test") {
      this.state=true;
      await this.getAuth();
      var StagingList = [];
      var TestList = [];
      if (e == "staging") {
        for (var i = 0; i < this.data.length; i++) {
          if (this.data[i].environment == "staging") {
            StagingList.push(this.data[i]);
            this.env=this.data[i].environment
          }
        }
        this.selectData = StagingList;
        this.selectDatas=this.selectData
      } else if (e == "test") {
        for (i = 0; i < this.data.length; i++) {
          if (this.data[i].environment == "test") {
            TestList.push(this.data[i]);
            this.env=this.data[i].environment
          }
        }
        this.selectData = TestList;
        this.selectDatas=this.selectData
        
      }
      console.log("打印报告接口返回数据");
      console.log(this.selectData)
      this.state=false;
    },
    //获取所有部门
    async getAllDepartment() {
      const { response } = await allDepartment();
      console.log(response)
      for (var i = 0; i < response.results.length; i++) {
        var duix = new Object();
        var { id } = response.results[i];
        var { depart_name } = response.results[i];
        duix["value"] = id;
        duix["label"] = depart_name;
        duix["isLeaf"] = false;
        console.log(duix)
        this.All_Department.push(duix);
        console.log(this.All_Department)
      }
    },
    //下拉框选择部门
    get_department_id(department_id){
      if (department_id=="0"){
        this.selectDatas=this.selectData
        this.select_option="0"
      }
      else{
        this.select_option=department_id
        this.selectDatas=this.selectData.filter(item=>item.depart_id===department_id)

      }
      console.log("测试————————",+department_id);
      console.log(",select_option",this.select_option)
      console.log(this.env)
      

    },

    //选择环境
    callback(key) {
      this.handle(key);
    },
    // 根据用户权限展示测试报告
    async getAuth() {
      const useri_id = getUserId();
      const { response } = await getUserAuthRequest(useri_id);
      if (response && response.succese === true) {
        const auth = response.results[0].auth;
        const res = await testReportList()
        if (res && res.response.succese === true) {
            const allProjectList = res.response.results;
            if (auth === 1) {
              const Arr = res.response.results;
              Arr.forEach((item, index) => {
                item.indexId = index + 1;
              });
              this.data = Arr;
            } else {
              const res = await getProjectRequest(useri_id)
              if (res && res.response.succese === true) {
                  const projectList = [];
                  res.response.results.projct.map((item) => {
                    return projectList.push(item.project_id);
                  });
                  const Arrs = [];
                  allProjectList.map((item) => {
                    if (projectList.indexOf(item.project_id) > -1) {
                      Arrs.push(item);
                      Arrs.forEach((item, index) => {
                        item.indexId = index + 1;
                      });
                    }
                  });
                  this.data = Arrs;
                }
            }
          }
      }
    },

    // 删除所选报告
    async deleteReport(record) {
      const { response } = await deleteTestReport(record);
      if (response && response.succese === true) {
        message.success("删除成功", 2);
        await this.getAuth();
        console.log(this.data, "data");
      } else if (response && response.succese === false) {
        message.error("删除失败", 2);
      }
    },
    toDetail(record) {
      this.$router.push(`/detail/${record}`);
    },
  },
};
</script>
<style scoped>
.tbl-report {
  min-height: 900px;
}
</style>

 监听父组件中传了的值groupslist

 props: {
    project_id: {},
    apislist: {
      type: Array,
    },
    group_id: {},
    groupslist: {
      type: Array,
    },
  },

监听到发送改变时page页设置为1

watch:{
   groupslist(){
     this.pagechange(1)
   }
  },