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

时间：2021-05-26

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

job.vue页面

组件list.vue

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

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

相关文章

Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解

使用vue的v-for生成table并给table加上序号的实例代码

vue实现分页的三种效果

vue+Element-ui前端实现分页效果

Vue实现图书管理案例