vue实现前台列表数据过滤搜索、分页效果

<style lang="scss">
.job-wrapper {
 padding-top: 50px;
}
.job-left {
 float: left;
 margin-right: 20px;
 padding: 20px;
 width: 310px;
 background: #fff;
}
.job-serach-title {
 margin: 8px 0 10px 0;
 color: rgb(51, 51, 51);
 font-size: 16px;
}

.job-search-input {
 display: flex;
}
.job-keywords {
 width: 400px;
}
.job-search-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 margin-left: 10px;
 width: 50px;
 height: 40px;
 border-radius: 4px;
 background-color: rgb(254, 62, 98);
}
.line {
 margin: 25px 0 0 0;
 width: 100%;
 height: 1px;
 background: #dfdfdf;
}

.halogg {
 margin-top: 30px;
 color: rgb(102, 102, 102);
 font-weight: 300;
 font-size: 14px;
}
.job-right {
 float: right;
 width: 870px;
 background: #fff;
}
</style>

<style lang="scss">
// 重置样式
#job-select-1,
#job-select-2 {
 margin-top: 20px;
 select {
 width: 100%;
 }
}
</style>
<template>
 <article class="job">

 <div class="job-content layout">
  <div class="job-wrapper">
  <div class="job-left">
   <div class="job-serach-title">搜索更多职位</div>
   <div class="job-search-input">
   <input v-model.trim="formdata.keywords" @change="searchdata" placeholder="搜索更多职位" class="job-keywords" />
   <div class="job-search-btn pointer" @click="searchdata">
    搜
   </div>
   </div>
   <div class="line"></div>
   <div class="job-select" id="job-select-1">
   <select v-model="formdata.address" @change="searchdata">
    <option v-for="item,index in regionarr" :key="index">{{item.name}}</option>
   </select>
   </div>
   <div class="job-select" id="job-select-2">
   <select v-model="formdata.title" @change="searchdata">
    <option v-for="(item,index) in searchlist" :key="index">{{item}}</option>
   </select>
   </div>
  </div>
  <div class="job-right">
   <joblist></joblist>
  </div>
  </div>

 </div>
 </article>
</template>
<script>
import joblist from 'src/components/job/list';
import { mapgetters, mapactions, mapmutations } from 'vuex';

export default {
 name: 'reportformindex',
 data() {
 return {
  formdata: {
  title: '',
  address: '',
  keywords: '',
  },
 };
 },
 computed: {
 ...mapgetters(['searchlist', 'regionarr', 'show']),
 },
 watch: {},
 title() {
 return '行业';
 },
 methods: {
 ...mapactions(['getdata']),
 // select 选中后的回调数据
 searchdata() {
  const payload = {
  formdata: object.assign({}, this.formdata),
  pageindex: 0, // 每次搜索后, 显示搜索结果的第一页
  };
  this.$store.commit('setstate', payload);
 },
 },
 mounted() {
 this.$nexttick(() => {
  this.getdata();
 });
 },
 components: {
 joblist,
 },
};
</script>

<style lang="scss">
.list-header {
 position: relative;
 display: flex;
 padding: 25px 30px 20px 30px;
 color: rgb(153, 153, 153);
 font-size: 14px;
 &:after {
 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
 display: inline-block;
 width: 100%;
 height: 1px;
 background-color: #dfdfdf;
 content: '';
 }
}
.l-header-item-1 {
 padding-left: 20px;
 width: 37.3%;
}
.l-header-item-2 {
 padding-left: 10px;
 width: 32.7%;
}
.l-header-item-3 {
 padding-left: 10px;
 width: 18.7%;
}
.l-header-item-4 {
 display: flex;
 width: 11.3%;
 .open {
 color: #3e8bf5;
 text-decoration: underline;
 font-size: 14px;
 }
 .arrow-open {
 margin-top: 5px;
 margin-left: 5px;
 width: 11px;
 height: 7px;
 transition: all 0.5s linear;
 }
}
.inner-item {
 padding: 0 30px;
}
.inner-box {
 position: relative;
 display: flex;
 padding: 25px 0;
 color: rgb(51, 51, 51);
 font-size: 16px;
 transition: all 0.5s linear;
 &:after {
 position: absolute;
 right: 0px;
 bottom: 0;
 left: 0px;
 display: inline-block;
 height: 1px;
 background-color: #dfdfdf;
 content: '';
 }
}
//
.list-item {
 &.active {
 .list-show-detail {
  visibility: visible;
  padding: 0 50px;
  max-height: 1000px;
  transition: all 0.5s linear;
 }
 .inner-box {
  background: #f2f2f2;
  transition: all 0.5s linear;
  &:after {
  background-color: transparent;
  }
 }
 .arrow-open {
  transition: all 0.5s linear;
  transform: rotate(-180deg);
 }
 }
}
.list-show-detail {
 visibility: hidden;
 max-height: 0;
 transition: all 0.5s linear;
}
.list-task-title {
 margin: 25px 0 15px 0;
 color: rgb(51, 51, 51);
 font-size: 14px;
}

.list-task-item {
 color: rgb(102, 102, 102);
 font-size: 14px;
 line-height: 1.714;
}
.list-apply {
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 25px 0 30px 0;
 width: 140px;
 height: 50px;
 border-radius: 4px;
 background-color: rgb(254, 62, 98);
 color: rgb(255, 255, 255);
 font-size: 16px;
}

/////pagination
.job-pagination {
 padding: 50px 0;
 .pagination-wrapper {
 display: flex;
 justify-content: center;
 margin: 0 auto;
 width: 100%;
 .subscript {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  width: 28px;
  height: 28px;
  border: 1px solid rgb(223, 223, 223);
  border-radius: 4px;
  color: blue;
  color: rgb(102, 102, 102);
  text-align: center;
  font-size: 14px;

  &.active {
  border: 1px solid rgb(254, 62, 98);
  background-color: rgb(254, 62, 98);
  color: #fff;
  }
 }
 .pagination-page {
  display: inline-block;
  width: 7px;
  height: 11px;
  background-image: url('./images/arrow.png');
  &.pagination-next {
  transform: rotate(180deg);
  }
 }
 }
}
////
.job-no-data {
 padding: 100px 0;
 .job-no-data-img {
 margin: 0 auto;
 width: 170px;
 height: 170px;
 background-image: url('./images/job@2x.png');
 background-size: cover;
 background-repeat: no-repeat;
 }
 .job-no-data-msg {
 margin-top: 10px;
 color: rgb(51, 51, 51);
 text-align: center;
 font-size: 18px;
 line-height: 2.778;
 }
}

@media only screen and (max-width: 1200px) {
 .list-header {
 padding: 25px 30px 20px 30px;
 }
}

@media only screen and (max-width: 767px) {
 .list-header {
 padding: 20px 15px 15px 15px;
 }
 .inner-item {
 padding: 0px 15px 0 15px;
 &:after {
  right: 15px;
  left: 15px;
  transform: scaley(0.5);
 }
 }

 .l-header-item-1 {
 padding-left: 10px;
 }
 .l-header-item-2 {
 padding-left: 10px;
 width: 28.7%;
 }
 .l-header-item-3 {
 padding-left: 10px;
 width: 19.7%;
 }
 .l-header-item-4 {
 width: 14.3%;
 }
}
</style>
<template>
 <article id="list">
 <ul class="list-wrapper">
  <li class="list-header">
  <div class="l-header-item-1">职位名称</div>
  <div class="l-header-item-2">职位分类</div>
  <div class="l-header-item-3">所在地区</div>
  <div class="l-header-item-4"></div>
  </li>
  <li class="list-item" v-for="(item,index) in curlist" :key="index" :class="{'active':item.show}" v-show="curlist.length">
  <div class="inner-item">
   <div class="inner-box">
   <div class="list-position l-header-item-1">{{item.position}}</div>
   <div class="list-title l-header-item-2">{{item.title}}</div>
   <div class="list-address l-header-item-3">{{item.address}}</div>
   <div class="list-action l-header-item-4 pointer" @click="showhandler(item.id)">
    <span class="open">展开</span>
    <img src="./images/arrow-open.png" alt="" class="arrow-open">
   </div>
   </div>
  </div>
  <transition name="el-zoom-in-top">
   <div class="list-show-detail" v-show="item.show">
   <div class="list-task-title">岗位职责:</div>
   <div class="list-task-wrapper">
    <div class="list-task-item" v-for="(item2,index2) in item.task" :key="index2">{{item2}}</div>
   </div>
   <div class="list-task-title">岗位要求:</div>
   <div class="list-task-wrapper">
    <div class="list-task-item" v-for="(item3,index3) in item.rule" :key="index3">{{item3}}</div>
   </div>
   </div>
  </transition>
  </li>
  <li class="job-no-data" v-show="!curlist.length">
  <div class="job-no-data-img"></div>
  <div class="job-no-data-msg">暂未合适的职位</div>
  </li>
  <li class="job-pagination" v-show="curlist.length">
  <div class="pagination-wrapper">
   <span class="subscript pointer" @click="prev">
   <span class="pagination-prev pagination-page"></span>
   </span>
   <span class="subscript pointer" @click="selectpagehandler(index - 1)" v-for="index in pagelength" :key="index" :class="{active: pageindex === index - 1}">{{index}}</span>
   <span class="subscript pointer" @click="next">
   <span class="pagination-next pagination-page"></span>
   </span>
  </div>
  </li>
 </ul>

 </article>
</template>
<script>
import { mapstate, mapgetters, mapactions, mapmutations } from 'vuex';

const per_page = 8; // 每页显示多少个

export default {
 name: 'list',
 data() {
 return {};
 },
 computed: {
 ...mapstate({
  // pageindex: state => state.job.pageindex,
 }),
 ...mapgetters(['filterjoblist', 'pageindex']),
 curlist() {
  const { filterjoblist, pageindex } = this;
  const startindex = pageindex * per_page;
  const endindex = startindex + per_page;
  return filterjoblist.slice(startindex, endindex);
 },
 pagelength() {
  const { filterjoblist } = this;
  if (filterjoblist.length) {
  return math.ceil(filterjoblist.length / per_page);
  }
  return 0;
 },
 },
 methods: {
 ...mapactions(['showandhide']),
 // 操作 展开 隐藏
 showhandler(id) {
  this.showandhide(id);
 },
 selectpagehandler(pageindex) {
  this.$store.commit('setstate', {
  pageindex,
  });
  //同时关闭已经打开的职位详情页
  this.$store.commit('hidealldetailmutations');
 },
 // 上一页
 prev() {
  this.$store.commit('prevmutations');
 },
 // 下一页
 next() {
  this.$store.commit('nextmutations', this.pagelength);
 },
 },
 mounted() {},
 components: {},
};
</script>

import { unique } from 'src/assets/script/util.js';
import jobdata from 'src/views/job/data.js';

// 初始状态
const state = {
 realdata: [],
 searchlist: [],
 regionarr: [{
   name: '上海',
   id: 1,
  },
  {
   name: '武汉',
   id: 2,
  },
 ],
 // 右侧搜索,用户输入
 formdata: {
  title: '', // 职位分类
  address: '', // 地区
  keywords: '', // 搜索更多职位
 },
 pageindex: 0, // 第 0 页
 show: false, // 申请工作的 modal
 applyjobposition: '' // 申请工作的职位
};

// 读取数据
const getters = {
 applyjobposition: state => state.applyjobposition,
 show: state => state.show,
 pageindex: state => state.pageindex,
 regionarr: state => state.regionarr,
 searchlist: state => {
  const cache = [];
  state.realdata.foreach(n => {
   cache.push(n.title);
  });
  return unique(cache);
 },
 // 符合条件的职位
 filterjoblist({ realdata, formdata }) {
  const { title, address, keywords } = formdata;

  return (
   realdata
   // 职位筛选逻辑
   .filter(item => {
    let matchaddress = true; // 地区筛选
    let matchposition = true; // 职位筛选
    let matchkeywrod = true; // 关键字 筛选
    if (title) {
     matchposition = item.title === title;
    }
    if (address) {
     matchaddress = item.address === address;
    }
    if (keywords) {
     // 模糊搜索;
     const keys = keywords
      .touppercase() // 转大写
      .replace(' ', '') // 删掉空格
      .split(''); // 切割成 单个字

     matchkeywrod = keys.every(key => item.position.touppercase().includes(key));
    }
    return matchaddress && matchposition && matchkeywrod;
   })
  );
 },
};

// 数据改变
const mutations = {

 // 从json文件直接获取元数据
 getdatamutations(state, jobdata) {
  state.realdata = jobdata;
 },
 // 职位详情 显示/隐藏
 showandhidemutations(state, id) {
  state.realdata.foreach((n, i) => {
   if (id === n.id) {
    n.show = !n.show;
   }
  });
 },
 // 职位详情 全部隐藏
 hidealldetailmutations(state) {
  state.realdata.foreach((n, i) => {
   n.show = false;
  });
 },
 setstate(state, payload = {}) {
  // console.log('payload', payload);
  object.entries(payload).foreach(([key, value]) => {
   state[key] = value;
  });
 },
 // prev
 prevmutations(state, payload = {}) {
  if (!state.pageindex) {
   return;
  }
  state.pageindex--
 },
 // next
 nextmutations(state, payload = {}) {
  // console.info(state.pageindex, payload)
  if (state.pageindex < payload - 1) {
   state.pageindex++
  }

 },
 // open modal
 openapplyjobmodal(state, payload = {}) {
  state.show = true
  state.applyjobposition = payload
 },
 //close modal
 closeapplyjobmodal(state) {
  state.show = false
 },
};

// 逻辑响应
const actions = {
 getdata({ commit }) {
  commit('getdatamutations', jobdata);
 },
 // 显示 隐藏
 showandhide({ commit }, id) {
  commit('showandhidemutations', id);
 },
};

export default {
 state,
 getters,
 actions,
 mutations,
};

// 数组去重
export function unique(arr) {　　
 var newarr = [arr[0]];　　
 for (var i = 1; i < arr.length; i++) {　　　　
  if (newarr.indexof(arr[i]) == -1) {　　 newarr.push(arr[i]);　　 }
 }
 return newarr;
}