准备工作

1.先创建一个 vue 项目 ，要安装 axios ，并引入项目中，来实现表格数据的获取。2.表格的数据可以通过在线的 _接口调试管理软件 _，来模拟数据库的数据，进行前端的测试。

这里我用到的是在线的 Apifox 工具，可以在里面创建一个新接口

在左下角点击 文档模式如果想要生成的文档是自己预期的数据，那么就需要点击 新建期望在这个自动生成的数据中 也是可以进行修改的最后生成的文档，可以点击这个链接，直接赋值后到浏览器粘贴显示查看

页面效果展示

模糊搜索，点击搜索或者按 enter 键可以搜索出结果点击分页显示不同界面

具体实现

视图由两部分构成：上面是搜索区，下面是表格展示区。

1.先构建页面，利用 Element UI，进行页面的设计。

2.完成具体功能的实现。

表格展示区：

1）.使用Element 的表格组件 el-table、el-table-column 等构建表格。列表分页显示是使用了 element-ui 中 el-table 和 el-pagination 标签2）.el-table中data是需要在表格中展示的数据。3）.分页条使用的属性说明：layout: 组件布局，子组件名用逗号分隔，取值类型为 string。子组件名可以按照需求调换顺序，并用逗号分隔。total: 显示页码总条数。和 page-count 设置任意一个即可达到显示页码的功能。page-sizes: 每页显示个数选择器的选项设置。取值类型为 number 数组。page-size: 每页显示条目数，支持 .sync 修饰符。取值类型为 number，默认值为10。current-page: 当前页数，支持 .sync 修饰符。取值类型为 number，默认值为1。分页事件说明：size-change: 侦听 pageSize 的改变。current-change: 侦听 currentPage 的改变。

核心的实现代码

currentChangePage : 是用来展示每次切换时当前页面数据及条数。搜索区的方法：searchput: 点击 搜索 ，或是按 enter 键 ，都表示要搜索信息，表格中仅显示满足条件的数据。

完整代码展示：

这个链接，是在前面准备工作时，在在线的 Apifox 工具中创建的模拟数据。

参考阅读

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：