访问swaggerUI的接口得到返回的json数据，就是我们页面上要显示的数据

复制到页面的数据这里

<el‐table
:data="list"
stripe
style="width: 100%">
<el‐table‐column type="index" width="60">
</el‐table‐column>
<el‐table‐column prop="pageName" label="页面名称" width="120">
</el‐table‐column>
<el‐table‐column prop="pageAliase" label="别名" width="120">
</el‐table‐column>
<el‐table‐column prop="pageType" label="页面类型" width="150">
</el‐table‐column>
<el‐table‐column prop="pageWebPath" label="访问路径" width="250">
</el‐table‐column>
<el‐table‐column prop="pagePhysicalPath" label="物理路径" width="250">
</el‐table‐column>
<el‐table‐column prop="pageCreateTime" label="创建时间" width="180" >
</el‐table‐column>
</el‐table>

加分页

复制到table的下面

分页显示的效果

分页显示在右边

让分页组件起作用

看文档

这里的total前面有冒号，相当于是v-bind的形式，这里省略的写法，前面只加一个冒号

在数据里面定义一个total

把这个total绑定在分页的属性上。

单独定义一个params属性

当前页的属性

查询按钮事件

methods下定义单击事件

改变当前页的事件

不知道怎么用可以在文档的页面全局的搜索一下

定义changePage的方法

转载于:https://www.cnblogs.com/wangjunwei/p/11562211.html

阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_20-CMS前端页面查询开发-页面原型-页面内容完善...相关推荐

2023年最新黑马程序员Java微服务项目--学成在线
正式上线Java微服务项目<学成在线> 项目对程序员的重要性不用播妞多说了吧更重要的是这次是完整!实战!企业级!项目! 划重点:全新发布!正式上线! <学成在线>项目以在 ...
微服务实战项目-学成在线-课程发布模块
学成在线-课程发布模块 1 模块需求分析 1.1 模块介绍课程信息编辑完毕即可发布课程,发布课程相当于一个确认操作,课程发布后学习者在网站可以搜索到课程,然后查看课程的详细信息,进一步选课.支付.在 ...
前端网页项目-学成在线案例
典型的企业级网站目的是为了整体感知企业级网站布局流程,复习以前知识准备素材和工具: 学成在线PSD源文件开发工具=PS(切图)/cutterman插件+vscode(代码)+chrome(测试) ...
Java的新项目学成在线笔记-day10（三）
1.4 测试CMS一键发布接口 1.4.1 配置虚拟主机在nginx配置课程详情页面的虚拟主机,实现访问:www.xuecheng.com/course/detail/.....html. #静态资 ...
Java的新项目学成在线笔记-day10（一）
1 课程发布 1.1 需求分析课程发布后将生成正式的课程详情页面,课程发布后用户即可浏览课程详情页面,并开始课程的学习. 课程发布生成课程详情页面的流程与课程预览业务流程相同,如下: 1.用户进入教 ...
Java的新项目学成在线笔记-day9（七）
3 课程预览技术方案 3.1 需求分析课程预览是为了保证课程发布后的正确性,通过课程预览可以直观的通过课程详情页面看到课程的信息是否正确, 通过课程预览看到的页面内容和课程发布后的页面内容是一致的. ...
Java的新项目学成在线笔记-day13（九）
6.2.2 创建媒资服务工程媒资管理的相关功能单独在媒资服务中开发,下边创建媒资服务工程(xc-service-manage-media). 媒资服务的配置与cms类似,导入 "资料&qu ...
Java的新项目学成在线笔记-day10（二）
1.3 课程发布接口 1.3.1 Api接口此Api接口由课程管理提供,由课程管理前端调用此Api接口,实现课程发布. 在api工程下课程管理包下定义接口: [mw_shl_code=applesc ...
Java的新项目学成在线笔记-day8（三）
1.1.3.1 需求上传图片界面如下图: 点击"加号"上传图片,图片上传成功自动显示:点击"删除"将删除图片. 1.1.3.2 页面使用Element-UI ...
Java的新项目学成在线笔记-day12（六）
3.6 获取数据 3.6.1 asyncData 方法 Nuxt.js 扩展了 Vue.js,增加了一个叫 asyncData 的方法, asyncData 方法会在组件(限于页面组件)每次加载之前 ...

阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_20-CMS前端页面查询开发-页面原型-页面内容完善...

加分页

让分页组件起作用

查询按钮事件

阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_20-CMS前端页面查询开发-页面原型-页面内容完善...相关推荐

最新文章

热门文章