说明:自学做的笔记和记录,如有错误请指正
一、 Element Plus安装与引入
1.安装 Element Plus
参考Element Plus组件库官网,输入指令pnpm i element-plus安装
2.引入Element Plus插件
在入口文件引入并安装
二、走马灯组件应用
在官网中查询代码,粘贴至对应文件并进行修改
代码如下:
局部组件:carousel/index.vue
<template>
<div>
<el-carousel height="350px">
//carousel 的高度
<el-carousel-item v-for="item in 4" :key="item">
<img src="../../assets/img/web-banner-1.png">
</el-carousel-item>
</el-carousel>
</div>
</template>
<style scoped>
img {
width:1200px;
height: 350px;
}
</style>
实现效果:
三、自动补全输入框
1. Icon图标
安装(参考官网)
使用
2. 自动补全输入框
在官网中查询代码,粘贴至对应文件并进行修改
初始代码如下:
局部组件:search/index.vue
<template>
<div class="search">
<el-autocomplete
v-model="state2"
:fetch-suggestions="querySearch"
:trigger-on-focus="false"
placeholder="请输入医院"
@select="handleSelect"
/>
<el-button type="primary" :icon="Search">搜索</el-button>
</div>
</template>
显示如下:
(1)调整格式:深度选择器
知识点:
子组件有scoped的情况下,修改 Element Plus中组件的style方式是深度选择器
子组件加了scoped后,父组件的css样式影响到子组件
三个深度度选择器:
原生css: >>> (在没有用less/scss的时候使用)
less: /deep/
scss: ::v-deep(如果使用了预处理器都可以使用这个(推荐))
使用:开发者模式下查询到输入框 class="el-input__wrapper"
格式设置如下:
代码如下:
局部组件:search/index.vue
<template>
<div class="search">
<el-autocomplete
v-model="hosname"
:fetch-suggestions="querySearch "
:trigger-on-focus="false"
placeholder="请输入医院"
@select="handleSelect"
/>
<el-button type="primary" :icon="Search">搜索</el-button>
</div>
</template>
<script setup lang="ts">
import { Search } from "@element-plus/icons-vue"
</script>
<style scoped lang="scss">
.search {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0px;
::v-deep(.el-input__wrapper) {
width: 600px;
height: 50px;
}
::v-deep(.el-button) {
height: 50px;
}
}
</style>
效果显示如下:
(2)相关参数和函数设置
属性名 | 说明 | 类型 |
model-value/v-model | 选中项绑定值 | string |
fetch-suggestions | 获取输入建议的方法(queryString), 仅当你的输入建议数据 resolve时,通过调用 callback(data:[ ])来返回它 | Function |
trigger-on-focus | 输入框聚焦时,是否显示建议 | boolean |
事件名 | 说明 | 类型 |
select | 点击选中建议项时触发 | Function |
参数一:v-model="hosname",与hosname绑定值,也就是自动输入建议的值可以通过hosname拿到;
参数二::fetch-suggestions=“querySearch” : 返回输入建议的方法,也就是输入框一获取焦点,就会自动调用该方法拿到数据;
参数三:”@select=“handleSelect” : 当选中建议项时,调用该方法;
步骤一:设置接口
根据医院名称获取医院列表接口:
在api文的index.ts文件中写入接口
import request from '../utils/request';
//通过枚举管理首页模块的接口地址
enum API {
//根据关键字医院的名字获取数据
HOSPITALINFO_URL = '/hosp/hospital/findByHosname/'
}
//根据关键字获取医院的数据进行展示
export const reqHospitalInfo = (hosname:string) => request.get(API.HOSPITALINFO_URL+hosname)
步骤二:设置函数,调用接口【将fetch-suggestions(获取该建议的方法)设置为该函数)】
显示接口调用成功:
步骤三:返回建议列表【通过querySearch的回调函数cb返回】
补充点一:querySearch函数的两个参数queryString和cb,其中queryString是文本框里输入的内容;cb是一个回调函数,返回筛选出的结果数据到输入框下面建议列表
补充点二:(接口返回数据result.data为数组).
map( )函数用于遍历数组元素:接受一个回调函数作为参数,根据回调函数返回一个新数组和新元素。
语法:
const newArr=array.map(function(currentValue, index, arr), thisIndex)
参数:
function(currentValue, index, arr):必须。为一个函数,数组中的每个元素都会执行这个函数。其中函数参数:
1.currentValue:必须。当前元素的的值。
2.index:可选。当前元素的索引。
3.arr:可选。当前元素属于的数组对象。
thisValue:可选。对象作为该执行回调时使用,传递给函数,用作"this"的值。
步骤四:选中建议时,调用方法【handleSelect方法】
具体路由跳转请看14.路由跳转(二)携带query参数
代码如下:
局部组件:search/index.vue
<template>
<div class="search">
<el-autocomplete
v-model="hosname"
:fetch-suggestions="querySearch "
:trigger-on-focus="false"
placeholder="请输入医院"
@select="handleSelect"
/>
<el-button type="primary" :icon="Search">搜索</el-button>
</div>
</template>
<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
//引入请求方法
import { reqHospitalInfo } from "../../api/index";
let hosname = ref<string>("");
const querySearch = async (queryString: string,cb: any) => {
let result = await reqHospitalInfo(queryString);
let showData = result.data.map(item => {
return {
value: item.hosname,//展示医院的名字
hoscode: item.hoscode//存储医院的编码
}
})
//给组件提供展示的医院名称
cb(showData);
}
const handleSelect = (item: hosname) => {
console.log(item)
}
</script>
<style scoped lang="scss">
.search {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0px;
::v-deep(.el-input__wrapper) {
width: 600px;
height: 50px;
}
::v-deep(.el-button) {
height: 50px;
}
}
</style>
效果显示如下:
四、 Layout布局组件应用
在官网中查询代码,粘贴至对应文件并进行修改
代码如下:
<template>
<div class="content">
<el-row>
<el-col :span="20">
左边部分
</el-col>
<el-col :span="4">
右边部分
</el-col>
</el-row>
</div>
</template>
显示如下:
五、Card卡片组件应用
1. 卡片组件
在官网中查询代码,粘贴至对应文件并进行修改
代码如下:
局部组件:Card/index.vue
<template>
<div class="card">
<el-card class="box-card">
<span>
<div class="content">
<div class="left">
<div class="name">
<span>北京大学国际医院</span>
</div>
<div class="tip">
<div class="level">
<svg t="1697615589728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12360" width="14" height="14"><path d="M365.713545 437.416342a48.702026 48.702026 0 0 0-48.74712 48.747121v487.583938a48.769667 48.769667 0 1 0 97.49424 0V486.163463a48.702026 48.702026 0 0 0-48.74712-48.747121zM73.163182 632.42737a48.74712 48.74712 0 0 0-48.769668 48.769668v292.550363a48.769667 48.769667 0 0 0 97.516788 0V681.197038a48.74712 48.74712 0 0 0-48.74712-48.769668zM950.814271 47.349192a48.74712 48.74712 0 0 0-48.74712 48.769667v877.651089a48.792215 48.792215 0 0 0 97.516787 0V96.096312A48.724573 48.724573 0 0 0 950.814271 47.349192zM658.263908 291.129887A48.724573 48.724573 0 0 0 609.516788 339.899555v633.847846a48.769667 48.769667 0 1 0 97.49424 0V339.899555a48.74712 48.74712 0 0 0-48.74712-48.769668z" fill="#999999" p-id="12361"></path></svg>
<span>二级甲等</span>
</div>
<div class="time">
<svg t="1697615619604" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13409" width="14" height="14"><path d="M512 64c-256 0-460.8 208-460.8 460.8s208 460.8 460.8 460.8 460.8-208 460.8-460.8S768 64 512 64zM512 940.8c-227.2 0-412.8-185.6-412.8-412.8s185.6-412.8 412.8-412.8 412.8 185.6 412.8 412.8S742.4 940.8 512 940.8z" p-id="13410" fill="#999999"></path><path d="M809.6 544l-278.4 0 0-281.6c0-12.8-9.6-22.4-22.4-22.4-12.8 0-22.4 9.6-22.4 22.4l0 307.2c0 12.8 9.6 22.4 22.4 22.4 0 0 3.2 0 3.2 0l297.6 0c12.8 0 22.4-9.6 22.4-22.4C832 553.6 822.4 544 809.6 544z" p-id="13411" fill="#999999"></path></svg>
<span>每天08:00放号</span>
</div>
</div>
</div>
<div class="right">图片</div>
</div>
</span>
</el-card>
<el-card class="box-card">
<span>
<div class="content">
<div class="left">
<div class="name">
<span>北京大学国际医院</span>
</div>
<div class="tip">
<div class="level">
<svg t="1697615589728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12360" width="14" height="14"><path d="M365.713545 437.416342a48.702026 48.702026 0 0 0-48.74712 48.747121v487.583938a48.769667 48.769667 0 1 0 97.49424 0V486.163463a48.702026 48.702026 0 0 0-48.74712-48.747121zM73.163182 632.42737a48.74712 48.74712 0 0 0-48.769668 48.769668v292.550363a48.769667 48.769667 0 0 0 97.516788 0V681.197038a48.74712 48.74712 0 0 0-48.74712-48.769668zM950.814271 47.349192a48.74712 48.74712 0 0 0-48.74712 48.769667v877.651089a48.792215 48.792215 0 0 0 97.516787 0V96.096312A48.724573 48.724573 0 0 0 950.814271 47.349192zM658.263908 291.129887A48.724573 48.724573 0 0 0 609.516788 339.899555v633.847846a48.769667 48.769667 0 1 0 97.49424 0V339.899555a48.74712 48.74712 0 0 0-48.74712-48.769668z" fill="#999999" p-id="12361"></path></svg>
<span>二级甲等</span>
</div>
<div class="time">
<svg t="1697615619604" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13409" width="14" height="14"><path d="M512 64c-256 0-460.8 208-460.8 460.8s208 460.8 460.8 460.8 460.8-208 460.8-460.8S768 64 512 64zM512 940.8c-227.2 0-412.8-185.6-412.8-412.8s185.6-412.8 412.8-412.8 412.8 185.6 412.8 412.8S742.4 940.8 512 940.8z" p-id="13410" fill="#999999"></path><path d="M809.6 544l-278.4 0 0-281.6c0-12.8-9.6-22.4-22.4-22.4-12.8 0-22.4 9.6-22.4 22.4l0 307.2c0 12.8 9.6 22.4 22.4 22.4 0 0 3.2 0 3.2 0l297.6 0c12.8 0 22.4-9.6 22.4-22.4C832 553.6 822.4 544 809.6 544z" p-id="13411" fill="#999999"></path></svg>
<span>每天08:00放号</span>
</div>
</div>
</div>
<div class="right">图片</div>
</div>
</span>
</el-card>
</div>
</template>
<style scoped lang="scss">
.card {
display: flex;
justify-content: space-between;
.box-card {
width: 500px;
margin: 5px 10px;
.content {
display: flex;
justify-content: space-between;
.left{
.name{
span{
font-size: 16px;
}
}
.tip{
display: flex;
align-items: center;
margin-top:40px;
span{
font-size: 14px;
color: #999;
margin-left: 5px;
}
.time{
margin-left: 80px;
}
}
}
}
}
}
</style>
显示效果为:
2. 数据显示
步骤一:调用接口在卡片上方显示所有医院等级和地区,如上图;
步骤二:点击等级和地区按钮,样式发生变化,获取对应的点击数据;
步骤三:根据医院等级和地区的点击情况调用接口,显示符合条件的卡片信息;
步骤一:在卡片上方显示所有医院等级和地区
(1)新建局部组件
局部组件:level/index.vue
局部组件:region/index.vue
(2)设置数据接口
获取所有医院等级接口
获取所有医院地区接口
①在api文的index.ts文件中写入接口
import request from '../utils/request';
//通过枚举管理首页模块的接口地址
enum API {
//获取医院的等级与地区接口
HOSPITALLEVELANDREGION_URL = 'cmn/dict/findByDictCode/',
}
//获取医院的等级与地区数据
export const reqHospitalLevelAndRegion = (dictCode:string) => request.get(API.HOSPITALLEVELANDREGION_URL+dictCode);
②局部组件:level/index.vue中设置函数
接口返回数据:
同理:局部组件:region/index.vue中设置函数
效果如下,显示全部登记和地区数据:
步骤二:点击按钮,样式发生变化,获取点击数据
(1)设置鼠标悬浮样式(level组件)
(2)设置鼠标点击样式(level组件)(知识点:切换active样式)
默认activeFlag的值为空,显示效果为:
(3)获取点击数据(level组件)
同理,补充region插件代码,显示效果为:
步骤三:根据条件调用接口,显示医院卡片
(1)设置获取数据接口
①在api文的index.ts文件中写入接口
import request from '../utils/request';
//通过枚举管理首页模块的接口地址
enum API {
//获取已有医院的数据接口地址
HOSPITAL_URL = '/hosp/hospital/',
}
//根据医院编码和地区编码获取医院的挂号详情在卡片中展示
export const reqHospital = (page: number, limit: number, hostype = '', districtCode = '') => request.get(API.HOSPITAL_URL+ `${page}/${limit}?hostype=${hostype}&districtCode=${districtCode}`);
②page/index.vue中设置函数
接口返回数据:
(2)接口返回的医院信息显示
①父组件接收接口返回数据,传递给子组件card
②子组件card接收医院数据并呈现
补充:
base64格式图片
data:image/jpeg;base64,base64编码的jpeg图片数据
效果如下,点击等级和地区按钮,医院卡片会自动更新
代码如下:
局部组件:level/index.vue
<template>
<div class="level">
<h1>医院</h1>
<div class="content">
<div class="left">等级:</div>
<ul class="hospital">
<li :class="{active:activeFlag==''}" @click="changeLevel('')">全部</li>
<li v-for="level in levelArr" :key="level.value" :class="{active:activeFlag==level.value}" @click="changeLevel(level.value)">
{{ level.name }}
</li>
</ul>
</div>
</div>
</template>
<script setup lang="ts">
import { reqHospitalLevelAndRegion } from "../../../api";
import { onMounted, ref } from "vue";
// 定义一个数组存储医院等级数据
let levelArr = ref([]);
// 定义控制医院等级高亮响应式数据
let activeFlag = ref("");
onMounted(() => {
getLevel();
});
const getLevel = async () => {
let result = await reqHospitalLevelAndRegion("HosType");
if (result.code == 200) {
levelArr.value = result.data;
}
};
// 点击等级按钮进行回调
const changeLevel = (level: string) => {
//点击按钮后,activeFlag存储等级数据
activeFlag.value = level;
// 将医院等级参数传递给父组件
$emit('transmitLevel',level);
}
//定义发送给父组件的方法
let $emit = defineEmits(['transmitLevel']);
</script>
<style scoped lang="scss">
.level {
margin-top: 10px;
h1 {
font-size: 16px;
font-weight: 900;
color: black;
margin: 20px 0px;
}
.content {
color: #7f7f7f;
font-size: 14px;
display: flex;
.left {
margin-right: 10px;
}
ul {
display: flex;
li {
margin-right: 20px;
&.active {
color: #55a6fe;
font-weight: bolder;
}
}
li:hover {
color: #55a6fe;
cursor: pointer;
}
}
}
}
</style>
局部组件:region/index.vue
<template>
<div class="region">
<div class="content">
<div class="left">地区:</div>
<ul class="hospital">
<li :class="{active:activeFlag==''}" @click="changeRegion('')">全部</li>
<li v-for="region in regionArr" :key="region.value" :class="{active:activeFlag==region.value}" @click="changeRegion(region.value)">{{ region.name }}</li>
</ul>
</div>
</div>
</template>
<script setup lang="ts">
import { reqHospitalLevelAndRegion } from "../../../api";
import { onMounted, ref } from "vue";
// 定义一个数组存储医院地区数据
let regionArr = ref([]);
// 定义控制医院地区高亮响应式数据
let activeFlag = ref("");
onMounted(() => {
getRegion();
});
const getRegion = async () => {
let result = await reqHospitalLevelAndRegion("Beijin");
if (result.code == 200) {
regionArr.value = result.data;
}
};
// 点击等级按钮进行回调
const changeRegion = (region: string) => {
//点击按钮后,activeFlag存储等级数据
activeFlag.value = region;
// 将医院等级参数传递给父组件
$emit('transmitRegion',region);
}
//定义发送给父组件的方法
let $emit = defineEmits(['transmitRegion']);
</script>
<style scoped lang="scss">
.region {
margin-top: 10px;
h1 {
font-size: 16px;
font-weight: 900;
color: black;
margin: 20px 0px;
}
.content {
color: #7f7f7f;
font-size: 14px;
display: flex;
.left {
width: 55px;
}
ul {
display: flex;
// 换行
flex-wrap: wrap;
li {
margin-right: 20px;
margin-bottom: 5px;
&.active {
color: #55a6fe;
font-weight: bolder;
}
}
li:hover {
color: #55a6fe;
cursor: pointer;
}
}
}
}
</style>
局部组件:card/index.vue
<template>
<div class="card">
<el-card class="box-card" shadow="hover">
<span>
<div class="content">
<div class="left">
<div class="name">
<span>{{hospitalInfo.hosname}}</span>
</div>
<div class="tip">
<div class="level">
<svg
t="1697615589728"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="12360"
width="14"
height="14"
>
<path
d="M365.713545 437.416342a48.702026 48.702026 0 0 0-48.74712 48.747121v487.583938a48.769667 48.769667 0 1 0 97.49424 0V486.163463a48.702026 48.702026 0 0 0-48.74712-48.747121zM73.163182 632.42737a48.74712 48.74712 0 0 0-48.769668 48.769668v292.550363a48.769667 48.769667 0 0 0 97.516788 0V681.197038a48.74712 48.74712 0 0 0-48.74712-48.769668zM950.814271 47.349192a48.74712 48.74712 0 0 0-48.74712 48.769667v877.651089a48.792215 48.792215 0 0 0 97.516787 0V96.096312A48.724573 48.724573 0 0 0 950.814271 47.349192zM658.263908 291.129887A48.724573 48.724573 0 0 0 609.516788 339.899555v633.847846a48.769667 48.769667 0 1 0 97.49424 0V339.899555a48.74712 48.74712 0 0 0-48.74712-48.769668z"
fill="#999999"
p-id="12361"
></path>
</svg>
<span>{{hospitalInfo.param.hostypeString}}</span>
</div>
<div class="time">
<svg
t="1697615619604"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="13409"
width="14"
height="14"
>
<path
d="M512 64c-256 0-460.8 208-460.8 460.8s208 460.8 460.8 460.8 460.8-208 460.8-460.8S768 64 512 64zM512 940.8c-227.2 0-412.8-185.6-412.8-412.8s185.6-412.8 412.8-412.8 412.8 185.6 412.8 412.8S742.4 940.8 512 940.8z"
p-id="13410"
fill="#999999"
></path>
<path
d="M809.6 544l-278.4 0 0-281.6c0-12.8-9.6-22.4-22.4-22.4-12.8 0-22.4 9.6-22.4 22.4l0 307.2c0 12.8 9.6 22.4 22.4 22.4 0 0 3.2 0 3.2 0l297.6 0c12.8 0 22.4-9.6 22.4-22.4C832 553.6 822.4 544 809.6 544z"
p-id="13411"
fill="#999999"
></path>
</svg>
<span>每天{{hospitalInfo.bookingRule.releaseTime}}放号</span>
</div>
</div>
</div>
<div class="right">
<img :src="`data:image/jpeg;base64,${hospitalInfo.logoData}`">
</div>
</div>
</span>
</el-card>
</div>
</template>
<script setup lang="ts">
// 接收父组件传递过来的props,即为已有医院的数据
let props = defineProps(['hospitalInfo']);
</script>
<style scoped lang="scss">
.content {
display: flex;
justify-content: space-between;
.left {
.name {
span {
font-size: 16px;
}
}
.tip {
display: flex;
justify-content: space-between;
margin-top: 40px;
span {
font-size: 14px;
color: #999;
margin-left: 5px;
}
.time {
margin-left: 80px;
}
}
}
.right {
img {
width: 50px;
height: 50px;
border-radius:50% ;
}
}
}
</style>
page/index.vue
<template>
<div class="content">
<!-- 走马灯局部组件 -->
<Carousel />
<!-- 搜索框局部组件 -->
<Search />
<!--展示医院表单结构-->
<el-row>
<el-col :span="20">
<!-- 医院等级 -->
<Level @transmitLevel="getLevel"/>
<!-- 医院地区 -->
<Region @transmitRegion="getRegion"/>
<!-- 医院卡片 -->
<div class="hospital" v-if="hasHospitalArr.length > 0">
<Card
class="item"
v-for="(item, index) in hasHospitalArr"
:key="index"
:hospitalInfo="item"
/>
</div>
<el-empty v-else description="暂无数据" />
</el-col>
<el-col :span="4">
<Tip/>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import {reqHospital} from '../../src/api/index';
// 引入组件
import Carousel from "../components/home/carousel/index.vue";
import Search from "../components/home/search/index.vue";
import Level from "../components/home/level/index.vue";
import Region from "../components/home/region/index.vue"
import Card from "../components/home/card/index.vue"
import Tip from "../components/home/tip/index.vue"
import { onMounted,ref } from "vue";
//存储医院的等级响应数据
let hostype = ref<string>('');
//存储医院的地区响应数据
let districtCode = ref<string>('');
//存储医院的数组
let hasHospitalArr = ref([]);
// 组件挂载完毕,发一次请求
onMounted(() => {
getHospitalInfo();
});
// 获取子组件传递过来的等级参数
const getLevel = (level: string) => {
//收集参数:等级参数
hostype.value = level;
getHospitalInfo();
};
const getRegion = (region: string) => {
//收集参数:等级参数
districtCode.value = region;
getHospitalInfo();
};
const getHospitalInfo = async()=>{
let result = await reqHospital(1,10,hostype.value,districtCode.value);
if (result.code === 200) {
// 存储已有医院的数组
hasHospitalArr.value = result.data.content;
}
}
</script>
<style scoped lang="scss">
.hospital {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.item {
width: 48%;
margin: 10px;
}
}
</style>
六、Empty 空状态组件
在官网中查询代码,粘贴至对应文件并进行修改
代码修改如下:
效果如下,医院数组长度为0时,显示空状态组件
七、Pagination 分页组件
1. 分页组件
在官网中查询代码,粘贴至对应文件并进行修改
展现的文字是英文,需要国际化
2. 数据绑定
代码如下:
<template>
<div class="content">
<!-- 走马灯局部组件 -->
<Carousel />
<!-- 搜索框局部组件 -->
<Search />
<!--展示医院表单结构-->
<el-row>
<el-col :span="20">
<!-- 医院等级 -->
<Level @transmitLevel="getLevel" />
<!-- 医院地区 -->
<Region @transmitRegion="getRegion" />
<!-- 医院卡片 -->
<div class="hospital" v-if="hasHospitalArr.length > 0">
<Card
class="item"
v-for="(item, index) in hasHospitalArr"
:key="index"
:hospitalInfo="item"
/>
</div>
<el-empty v-else description="暂无数据" />
<div class="pagination">
<el-pagination
background
v-model:current-page=pageNo
v-model:page-size=pageSize
:page-sizes="[10, 20, 30, 40]"
:small="small"
:disabled="disabled"
layout="prev, pager, next,jumper,->,sizes,total"
:total=total
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</el-col>
<el-col :span="4">
<Tip />
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { reqHospital } from "../../src/api/index";
// 引入组件
import Carousel from "../components/home/carousel/index.vue";
import Search from "../components/home/search/index.vue";
import Level from "../components/home/level/index.vue";
import Region from "../components/home/region/index.vue";
import Card from "../components/home/card/index.vue";
import Tip from "../components/home/tip/index.vue";
//存储医院的等级响应数据
let hostype = ref<string>("");
//存储医院的地区响应数据
let districtCode = ref<string>("");
//存储医院的数组
let hasHospitalArr = ref([]);
// 分分页器页码
let pageNo = ref<number>(1);
// 一页展示几条数据
let pageSize = ref<number>(10);
// 存储已有医院的总个数
let total = ref<number>(0);
// 组件挂载完毕,发一次请求
onMounted(() => {
getHospitalInfo();
});
const getHospitalInfo = async () => {
let result = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value);
if (result.code === 200) {
// 存储已有医院的数组
hasHospitalArr.value = result.data.content;
total = result.data.totalElements;
}
};
// 获取子组件传递过来的等级参数
const getLevel = (level: string) => {
//收集参数:等级参数
hostype.value = level;
getHospitalInfo();
};
const getRegion = (region: string) => {
//收集参数:等级参数
districtCode.value = region;
getHospitalInfo();
};
// page-size 改变时触发
const handleSizeChange=()=>{
getHospitalInfo();
};
// urrent-page 改变时触发
const handleCurrentChange=()=>{
getHospitalInfo();
}
</script>
效果如下: