前端--医院设置信息列表效果实现-实现分页、条件查询

最新推荐文章于 2023-05-05 09:32:53 发布

小码哥呀

最新推荐文章于 2023-05-05 09:32:53 发布

阅读量200

点赞数

分类专栏：医院挂号系统

本文链接：https://blog.csdn.net/qq_46112274/article/details/117386946

版权

医院挂号系统专栏收录该内容

69 篇文章 33 订阅

订阅专栏

本文介绍了如何使用Element-UI在前端实现医院信息列表的分页功能和条件查询。通过HTML和JavaScript代码展示了如何配置分页组件以及创建表单进行医院名称和编号的查询操作，点击查询按钮即可更新列表内容。

摘要由CSDN通过智能技术生成

1、分页

element-ui实现分页
html代码

 <!-- 分页 -->
 <el-pagination
     :current-page="current"
     :page-size="limit"
     :total="total"
     style="padding: 30px 0; text-align: center;"
     layout="total, prev, pager, next, jumper"
     @current-change="getList"
 />

在这里插入图片描述

js代码：
在这里插入图片描述
效果：

2、条件查询

element-ui表单查询代码
在这里插入图片描述

 <!-- 条件查询 -->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="">
                <el-input v-model="searchObj.hosname" placeholder="医院名称"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input v-model="searchObj.hoscode" placeholder="医院编号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon = "el-icon-search" @click="getList()">查询</el-button>
            </el-form-item>
        </el-form>