一 添加医院设置路由

修改文件 E:\vue-sdgt\src\router\index.js

{path: '/hospital',component: Layout,redirect: '/hospital/list',name: 'hospital',meta: { title: '医院管理', icon: 'table' },children: [{path: 'list',name: '医院列表',component: () => import('@/views/hospital/list'),meta: { title: '医院列表', icon: 'table' }},{path: 'add',name: '医院添加',component: () => import('@/views/hospital/add'),meta: { title: '医院添加', icon: 'table' }}]},

二 页面部分

修改文件 E:\vue-sdgt\src\views\hospital\list.vue

<template><div class="app-container"><!-- 条件查询 --><el-form :inline="true" class="demo-form-inline"><el-form-item><el-input v-model="searchObj.name" placeholder="医院名称" /></el-form-item><el-form-item><el-input v-model="searchObj.province" placeholder="省" /></el-form-item><el-form-item><el-input v-model="searchObj.city" placeholder="市" /></el-form-item><el-form-item><el-input v-model="searchObj.district" placeholder="区" /></el-form-item><el-button type="primary" icon="el-icon-search" @click="getList()">搜索</el-button></el-form><!-- 列表 --><el-table :data="list" stripe style="width: 100%"><el-table-column type="index" width="50" /><el-table-column prop="name" label="名称" /><el-table-column prop="province" label="省" /><el-table-column prop="city" label="市" /><el-table-column prop="district" label="区" /><el-table-column label="状态" width="80"><template slot-scope="scope">{{ scope.row.status === 1 ? '可用' : '不可用' }}</template></el-table-column></el-table><!-- 分页 --><el-pagination:current-page="page":page-size="limit":total="total"style="padding: 30px 0; text-align: center;"layout="total, prev, pager, next, jumper"@current-change="getList"/></div> </template> </div> </template><script> // 引入接口定义的 js 文件 import hospital from "@/api/hospital";export default {// 定义变量和初始值data() {return {current: 1, // 当前页limit: 3, // 每页显示记录数searchObj: {}, // 条件封装对象list: [], // 没页数据集合total: 0 // 总记录数};},// 在页面渲染之前执行，一般调用 methods 中定义的方法，得到数据created() {this.getList();},methods: {// 定义方法，进行请求接口调用// 医院列表getList(page = 1) {// 添加当前页参数this.current = page;hospital.getHospitalList(this.current, this.limit, this.searchObj).then(response => {// response 是接口返回数据this.list = response.data.records;this.total = response.data.total;}) // 请求成功.catch(error => {});} // 请求失败} }; </script>

三 在 api 创建 js 文件，定义接口路径

修改文件 E:\vue-sdgt\src\api\hospital.js

import request from '@/utils/request'export default {getHospitalList(current, limit, searchObj) {return request({url: `/admin/hospital/findPageHospital/${current}/${limit}`,method: 'post',data: searchObj // 使用 json 进行参数传递})} }

四 修改接口ip和端口号

修改文件 E:\vue-sdgt\config\dev.env.js

'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"',BASE_API: '"http://localhost:8201"', })

五 修改 request 拦截器

修改文件 E:\vue-sdgt\src\utils\request.js

按实际情况配置，这里修改为200。

六 注意跨预问题

需要在后端代码加上 @CrossOrigin 注解，否则访问不通。

七 测试

总结

以上是生活随笔为你收集整理的vue 前端项目带条件查询的分页列表开发实战的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。