vite基础学习笔记：12.Element使用（首页局部组件拆分）

smellsummer

已于 2023-12-05 16:23:45 修改

阅读量346

点赞数 1

分类专栏： vite基础学习笔记文章标签：学习笔记

于 2023-10-20 14:03:54 首次发布

本文链接：https://blog.csdn.net/smellsummer/article/details/133884302

版权

vite基础学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

说明：自学做的笔记和记录，如有错误请指正

一、 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>

效果如下：