一?添加醫院設置路由

修改文件?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 前端项目带条件查询的分页列表开发实战的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。