点击el-select 选择项，el-table中显示相对应条目

想要的功能效果图如下：

当点击“应聘岗位”的下拉选择框后，表格里出现应聘岗位相对应的数据条目。 

需要说明的是，表格和分页我是单独抽离成一个子组件来写的，因此，点击父组件的下拉选项，表格出现相对应内容涉及到el-select的change事件和父组件调用子组件方法。

父组件的核心代码

<template>

<!-- 这是子组件tableInfo -->
 <div class="panel_body">
<!-- ref可以拿到子组件中的data和去调用子组件中的方法 -->
          <tableInfo ref="first" />  
 </div>

<!-- 这是下拉框组件 -->
 <el-select placeholder="搜索" v-model="value" class="input_pull" @change="filterData">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
</template>

<script>
import tableInfo from './tableInfo'

export default {
  components: {
    tableInfo //子组件表格
  },
  data() {
    return {
      input: '',
      value: '',//下拉框选项绑定的值
options: [{
        value: 'gaoji',
        label: '高级工程师'
      },
      {
        value: 'chuji',
        label: '初级工程师'
      }
...
...
]
},
 methods: {
filterData(value) {//  下拉框选项change触发事件   
      this.$refs.first.searchResource(value)//父组件调用子组件的过滤方法
    }
}
}
</script>

子组件核心代码

<template>
<el-table
        :header-cell-style="headerColor"
        :data="showTable"
        :cell-style="cellStyle"
        highlight-current-row
      >
  <el-table-column type="index" :index="i=>i+1" prop="order" label="序号" align="center" />
<!--次要内容省略  -->
</el-table>

<!-- 分页组件 -->
  <div class="resource-page">
      <span class="page_num">共{{this.filterDataShow.length}}条</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,15,20,25]"
        :page-size="pageSize"
        :pager-count="7"
        layout=" prev, pager, next, sizes"
        :total="filterDataShow.length"
      ></el-pagination>
    </div>
</template>

<script>
export default {
 data() {
    return {
    filterDataShow: [], //储存符合条件的数据
    pagesize: 10,
    currentPage: 1,
tableData: [
        {
          name: '张三',
          age: 23,
          degree: '本科',
          connection: '18766546372',
          jobApplication: '高级工程师',
          jobValue: 'gaoji',
          graduateSchoo: '清华大学',
          sourceChannel: '51JOB',
          political: '团员',
          station: '未读',
          application: '...',
          see: false,
        },
        {
          name: '李四',
          age: 23,
          degree: '本科',
          connection: '18766546372',
          jobApplication: '初级工程师',
          jobValue: 'chuji',
          graduateSchoo: '北京大学',
          sourceChannel: '51JOB',
          political: '团员',
          station: '未读',
          application: '...',
          see: false,
        },
        ...
]
},
methods:{
searchResource(value) {
      this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜  
      //筛选出tableData中，jobValue值与子组件传入的value值相等的条目，并赋值给空数组              
      this.filterDataShow = this.tableData.filter(item => item.jobValue === value)
      //筛选出tableData中，jobValue值与子组件传入的value值相等的条目，并赋值给空数组    
      if (value == undefined) {
        this.filterDataShow = this.tableData
      }
},
handleSizeChange(psize) {
      this.pagesize = psize;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    }
}
}
},
 mounted() {  
    this.searchResource();//在页面挂载后调用此方法，确保数据与页面发生了交互   
  },
  computed: {
    //showTable计算属性通过slice方法计算表格当前应显示的数据
    showTable() {  
      return this.filterDataShow.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    }
  }
}
</script>