如何在 vuejs 中进行过滤和分页

Question

我想在我的视图候选人页面中进行过滤和分页..我想根据姓名和经验以及预期的 ctc 显示候选人..我想显示候选人.. 谁能帮我在 vuejs 中做到这一点...

这是我的视图-candidates.blade.php

<div class="container">
<div class="row">
    <el-row :gutter="12">
        <el-col>
      <p>View Candidates</p>
    </el-col>
        </el-row>

    <el-row :gutter="12">
        <template v-for="c in candidates">
            <el-col :span="6">
            <Candidate :c="c" :key="c.id"></Candidate>
            </el-col>
        </template>
    </el-row>
</div>

这是我的 view-candidates.js 页面：

import Candidate from './components/Candidate.vue';
 const app = new Vue({
el: '#app',
data() {
    return {
        candidates: window.data.candidates,
        sortKey : 'first_name'
    }
},
components: { Candidate },

});

这是我的 Candidate.vue 页面：

<template>
<ElCard>
    <div slot="header">
      <strong>
        {{c.first_name.toUpperCase() + ' ' + c.last_name.toUpperCase()}}
        <br />
        <small>{{c.role}} - {{c.experience}} Years</small>
      </strong>
    </div>

    <p><strong>{{c.contact_no}} : {{c.email}}</strong></p>
    <p>
      <strong>Currently at:</strong> {{c.current_location}}
      <br />
      <strong>Ready to move:</strong> {{c.desired_location}}
    </p>

    <ElButton type="primary" size="small" @click="ResumeDialog = true">VIEW RESUME</ElButton>

    <ElDialog class="text-left" :title="c.first_name.toUpperCase() + ' ' + c.last_name.toUpperCase()" v-model="ResumeDialog">
        <p><strong>{{c.role}} - {{c.experience}} Years</strong></p>
        <p>
            <strong>Currently at:</strong> {{c.current_location}}
            <br />
            <strong>Ready to move:</strong> {{c.desired_location}}
        </p>
        <p>{{c.resume}}</p>
        <br />

        <p><strong>{{c.contact_no}} : {{c.email}}</strong></p>
    </ElDialog>
</ElCard>

//脚本

    import { Button as ElButton, Dialog as ElDialog, Card as ElCard } from 'element-ui';
    import axios from 'axios';

    export default {
        props: ['c'],
        data() {
            return {
                ResumeDialog: false,
            }
        },
        components: { ElButton, ElDialog, ElCard },
    }

谁能帮我怎么做..

TIA..

Answer 1

在您的 view-candidates.js 中应该是这样的：

import Candidate from './components/Candidate.vue';
const app = new Vue({
  el: '#app',
  data() {
    return {
      sortKey : 'first_name',
      page: 0,
      itemsPerPage: 4,
    }
  },
  components: { Candidate },
  methods: {
    //custom method bound to page buttons
    setPage(page) {
      this.page = page-1;
      this.paginedCandidates = this.paginate()
    },
    paginate() {
      return this.filteredCandidates.slice(this.page*this.itemsPerPage, this.itemsPerPage * this.page + this.itemsPerPage)        
    },
  },
  computed: {
    //compute number of pages, we always round up (ceil)
    numPages() {
      return Math.ceil(this.filteredCandidates.length/this.itemsPerPage);
    },
    filteredCandidates() {
      //filter out all candidates that have experience less than 10
      const filtered = window.data.candidates.filter((candidate) => {
        //e.g.
        if(candidate.experience < 10) {
          return false;
        }
        return true;
      })
      return filtered;
    },
    paginedCandidates() {
      return this.paginate()
    }
  }
});

然后你在模板中渲染按钮：

<div class="container">
<div class="row">
   <el-row :gutter="12">
       <el-col>
           <p>View Candidates</p>
       </el-col>
   </el-row>

   <el-row :gutter="12">
       <template v-for="c in paginedCandidates">
           <el-col :span="6">
               <Candidate :c="c" :key="c.id"></Candidate>
           </el-col>
       </template>
   </el-row>
   <el-row>
       <!-- setPage is our method defined in methods object -->
       <button v-for="n in numPages" @click="setPage(n)">@{{ n }}</button>
   </el-row>
</div>

我相信这应该会变魔术。可能您必须根据自己的需要对其进行一些调整。