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

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