这篇文章将为大家详细讲解有关如何使用vue实现前台列表数据过滤搜索、分页效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的平安网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!vue实现列表数据过滤搜索、分页效果的具体代码如下
job.vue页面
搜索更多职位搜
组件list.vue
职位名称职位分类所在地区 {{item.position}}{{item.title}}{{item.address}}展开![]()
岗位职责:{{item2}}岗位要求:{{item3}} 暂未合适的职位 {{index}}
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实现前台列表数据过滤搜索、分页效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。