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


Posted in Javascript onMay 28, 2019

本文实例为大家分享了vue实现列表数据过滤搜索、分页效果的具体代码,供大家参考,具体内容如下

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

job.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>

组件list.vue

<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>

store/job.js

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,
};

util.js

// 数组去重
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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
js实现分割上传大文件
Mar 09 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
ionic实现底部分享功能
May 11 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
js 将线性数据转为树形的示例代码
May 28 #Javascript
React中使用外部样式的3种方式(小结)
May 28 #Javascript
vue实现多条件和模糊搜索功能
May 28 #Javascript
vue实现路由切换改变title功能
May 28 #Javascript
Vue 无限滚动加载指令实现方法
May 28 #Javascript
vue实现搜索过滤效果
May 28 #Javascript
微信小程序 image组件遇到的问题
May 28 #Javascript
You might like
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
jquery中this的使用说明
2010/09/06 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
JavaScript字符串对象
2017/01/14 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
python实现读取并显示图片的两种方法
2017/01/13 Python
使用python实现knn算法
2017/12/20 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
django+echart数据动态显示的例子
2019/08/12 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
酒店管理自荐信
2013/10/23 职场文书
传媒专业推荐信范文
2013/11/23 职场文书
争先创优公开承诺书
2014/08/30 职场文书
售票员岗位职责
2015/02/15 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
花木兰观后感
2015/06/10 职场文书
人代会简报
2015/07/21 职场文书
Python time库的时间时钟处理
2021/05/02 Python
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
python小型的音频操作库mp3Play
2022/04/24 Python