要借助vant中的Tab,Tabs https://youzan.github.io/vant/#/zh-CN/tab

<template>
  <div id="search-result">
    <div class="pool_main">
      <Tabs class="tabs" swipeable>
        <Tab title="全部的数据">
          <!-- <JobListNew :jobs="jobs" /> -->
          <div style="height: 100px; width: 100%">内容111</div>
        </Tab>
        <Tab title="放开中的数据">
          <!-- <JobListNew :jobs="online" /> -->
          <div style="height: 100px; width: 100%">内容222</div>
        </Tab>
        <Tab title="关闭中的数据">
          <!-- <JobListNew :jobs="closed" /> -->
          <div style="height: 100px; width: 100%">内容333</div>
        </Tab>
      </Tabs>
    </div>
  </div>
</template>

<script>

import { Tab, Tabs } from 'vant';
import 'vant/lib/index.less';
import JobListNew from "./JobListNew";

export default {
  name: "Index",
  components: { JobListNew, Tab, Tabs },
  data () {
    return {
      jobs: [],
    };
  },
  computed: {
    closed () {
      return this.jobs.filter(e => e.status === 1);
    },
    online () {
      return this.jobs.filter(e => e.status === 0);
    }
  },

  mounted () {
    document.body.style.backgroundColor = "#F6F7F8";
    document.body.style.height = '100vh'
    this.getJobData()
  },
  methods: {
    //请求数据
    getJobData () {
      this.$http.get('/app/job/my').then(r => {
        this.jobs = r.data.data
      });
      this.isLoading = false;
    },
    loadData () {
      this.getJobData()
    },
  }
}
</script>
<style scoped >
* {
  margin: 0;
  padding: 0;
}
::v-deep .van-tabs__content {
  background: #f6f7f8;
}
::v-deep .van-tabs__line {
  position: absolute;
  bottom: 15px;
  left: 0;
  z-index: 1;
  width: 40px;
  height: 3px;
  background: #1283ff;
  border-radius: 200px 0px 0px 200px;
}

.pool_main {
  margin-bottom: 60px;
  background: #f5f6f7;
  padding-bottom: 60px;
  height: 100vh;
}
</style>