访问swaggerUI的接口 得到返回的json数据，就是我们页面上要显示的数据
复制到页面的数据这里
[ { "siteId": "5a751fab6abb5044e0d19ea1", "pageId": "5a754adf6abb500ad05688d9", "pageName": "index.html", "pageAliase": "首页-1", "pageWebPath": "/index.html", "pageParameter": null, "pagePhysicalPath": "F:\\develop\\xc_portal_static\\", "pageType": "0", "pageTemplate": null, "pageHtml": null, "pageStatus": null, "pageCreateTime": "2018-02-03T05:37:53.256+0000", "templateId": "5a962b52b00ffc514038faf7", "pageParams": null, "htmlFileId": "5a7c1c54d019f14d90a1fb23", "dataUrl": null }, { "siteId": "5a751fab6abb5044e0d19ea1", "pageId": "5a795ac7dd573c04508f3a56", "pageName": "index_banner.html", "pageAliase": "轮播图", "pageWebPath": "/include/index_banner.html", "pageParameter": null, "pagePhysicalPath": "F:\\develop\\xc_portal_static\\include\\", "pageType": "0", "pageTemplate": null, "pageHtml": null, "pageStatus": null, "pageCreateTime": "2018-02-06T07:34:21.255+0000", "templateId": "5a962bf8b00ffc514038fafa", "pageParams": null, "htmlFileId": "5a795bbcdd573c04508f3a59", "dataUrl": null }, { "siteId": "5a751fab6abb5044e0d19ea1", "pageId": "5a7be667d019f14d90a1fb1c", "pageName": "index_category.html", "pageAliase": "分类导航", "pageWebPath": "/include/index_category.html", "pageParameter": null, "pagePhysicalPath": "F:\\develop\\xc_portal_static\\include\\", "pageType": "0", "pageTemplate": null, "pageHtml": null, "pageStatus": null, "pageCreateTime": "2018-02-08T05:55:07.590+0000", "templateId": "5a962c16b00ffc514038fafd", "pageParams": null, "htmlFileId": "5a7be8e4d019f14d90a1fb21", "dataUrl": null }, { "siteId": "5a751fab6abb5044e0d19ea1", "pageId": "5a92141cb00ffc5a448ff1a0", "pageName": "10101.html", "pageAliase": "课程详情页面", "pageWebPath": "/course/", "pageParameter": null, "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\", "pageType": "1", "pageTemplate": null, "pageHtml": null, "pageStatus": null, "pageCreateTime": "2018-02-25T01:37:25.974+0000", "templateId": "5a925be7b00ffc4b3c1578b5", "pageParams": [ { "pageParamName": "courseid", "pageParamValue": "4028e581617f945f01617f9dabc40000" } ], "htmlFileId": "5a94d6c6b00ffc3ab4bfa4f4", "dataUrl": null }, { "siteId": "5a751fab6abb5044e0d19ea1", "pageId": "5a94d79cb00ffc3ab4bfa4f6", "pageName": "4028e581617f945f01617f9dabc40000.html", "pageAliase": "课程详情页面", "pageWebPath": "/course/", "pageParameter": null, "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\", "pageType": "1", "pageTemplate": null, "pageHtml": null, "pageStatus": null, "pageCreateTime": "2018-02-27T03:59:21.353+0000", "templateId": "5a925be7b00ffc4b3c1578b5", "pageParams": [ { "pageParamName": "courseid", "pageParamValue": "4028e581617f945f01617f9dabc40000" } ], "htmlFileId": "5aed94530e66185b64804c12", "dataUrl": null }, { "siteId": "5a751fab6abb5044e0d19ea1", "pageId": "5a96114fb00ffc4b44f63e06", "pageName": "4028e58161bcf7f40161bcf8b77c0000.html", "pageAliase": "课程详情页面", "pageWebPath": "/course/", "pageParameter": null, "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\", "pageType": "1", "pageTemplate": null, "pageHtml": null, "pageStatus": null, "pageCreateTime": "2018-02-28T02:17:45.785+0000", "templateId": "5a925be7b00ffc4b3c1578b5", "pageParams": [ { "pageParamName": "courseid", "pageParamValue": "4028e58161bcf7f40161bcf8b77c0000" } ], "htmlFileId": "5a962a07b00ffc514038faef", "dataUrl": null }, { "siteId": "5a751fab6abb5044e0d19ea1", "pageId": "5a961ff6b00ffc5a9cdebaea", "pageName": "4028e58161bd22e60161bd23672a0001.html", "pageAliase": "课程详情页面", "pageWebPath": "/course/", "pageParameter": null, "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\", "pageType": "1", "pageTemplate": null, "pageHtml": null, "pageStatus": null, "pageCreateTime": "2018-02-28T03:20:20.988+0000", "templateId": "5a925be7b00ffc4b3c1578b5", "pageParams": [ { "pageParamName": "courseid", "pageParamValue": "4028e58161bd22e60161bd23672a0001" } ], "htmlFileId": "5a962a0eb00ffc514038faf1", "dataUrl": null }, { "siteId": "5a751fab6abb5044e0d19ea1", "pageId": "5a9620b9b00ffc5a9cdebaed", "pageName": "4028e58161bd3b380161bd3bcd2f0000.html", "pageAliase": "课程详情页面", "pageWebPath": "/course/", "pageParameter": null, "pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\", "pageType": "1", "pageTemplate": null, "pageHtml": null, "pageStatus": null, "pageCreateTime": "2018-02-28T03:28:02.459+0000", "templateId": "5a925be7b00ffc4b3c1578b5", "pageParams": [ { "pageParamName": "courseid", "pageParamValue": "4028e58161bd3b380161bd3bcd2f0000" } ], "htmlFileId": "5afc0e250e661870603bc0ed", "dataUrl": null }, { "siteId": "5a751fab6abb5044e0d19ea1", "pageId": "5abefd525b05aa293098fca6", "pageName": "index2.html", "pageAliase": "ccc", "pageWebPath": "//fdsfs", "pageParameter": "", "pagePhysicalPath": "d:/html/", "pageType": "1", "pageTemplate": null, "pageHtml": null, "pageStatus": null, "pageCreateTime": "2018-03-31T03:14:49.771+0000", "templateId": "5abf57965b05aa2ebcfce6d1", "pageParams": null, "htmlFileId": "5abf5ce45b05aa073c7e5172", "dataUrl": "http://localhost:31001/cms/user/get/1" }, { "siteId": "5a751fab6abb5044e0d19ea1", "pageId": "5ad92e9068db52404cad0f79", "pageName": "preview_402885816243d2dd016243f24c030002.html", "pageAliase": "课程预览页面", "pageWebPath": "/coursepre/", "pageParameter": null, "pagePhysicalPath": "F:/eduprojects/xc-edu-snapshotv1.0/xc-ui-pc-static-portal/course/preview/", "pageType": "1", "pageTemplate": null, "pageHtml": null, "pageStatus": null, "pageCreateTime": "2018-05-26T08:49:27.909+0000", "templateId": "5aec5dd70e661808240ab7a6", "pageParams": null, "htmlFileId": "5b091f97c5e9b7070c94a2bb", "dataUrl": "http://localhost:40200/portalview/course/getpre/402885816243d2dd016243f24c030002" } ]
<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>
加分页
Pagination组件
https://element.eleme.io/#/zh-CN/component/pagination
复制到table的下面
<el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
分页显示的效果
分页显示在右边
让分页组件起作用
看文档
这里的total前面有冒号，相当于是v-bind的形式，这里省略的写法 ，前面只加一个冒号
在数据里面定义一个total
把这个total绑定在分页的属性上。
单独定义一个params属性
当前页的属性
查询按钮事件
methods下定义单击事件
改变当前页的事件
不知道怎么用可以在文档的页面全局的搜索一下
定义changePage的方法
<template>
<div>
<el-button type="primary" v-on:click="query">查询按钮</el-button>
<el-table
:data="tableData"
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="180">
</el-table-column>
<el-table-column
prop="pageWebPath"
label="访问路径">
</el-table-column>
<el-table-column
prop="pagePhyisicalPath"
label="物理路径">
</el-table-column>
<el-table-column
prop="pageCreateTime"
label="创建时间">
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
:total="total"
:page-size="param.size"
@current-change="changePage"
style="float: right;">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5a754adf6abb500ad05688d9",
"pageName": "index.html",
"pageAliase": "首页-1",
"pageWebPath": "/index.html",
"pageParameter": null,
"pagePhysicalPath": "F:\\develop\\xc_portal_static\\",
"pageType": "0",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-02-03T05:37:53.256+0000",
"templateId": "5a962b52b00ffc514038faf7",
"pageParams": null,
"htmlFileId": "5a7c1c54d019f14d90a1fb23",
"dataUrl": null
},
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5a795ac7dd573c04508f3a56",
"pageName": "index_banner.html",
"pageAliase": "轮播图",
"pageWebPath": "/include/index_banner.html",
"pageParameter": null,
"pagePhysicalPath": "F:\\develop\\xc_portal_static\\include\\",
"pageType": "0",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-02-06T07:34:21.255+0000",
"templateId": "5a962bf8b00ffc514038fafa",
"pageParams": null,
"htmlFileId": "5a795bbcdd573c04508f3a59",
"dataUrl": null
},
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5a7be667d019f14d90a1fb1c",
"pageName": "index_category.html",
"pageAliase": "分类导航",
"pageWebPath": "/include/index_category.html",
"pageParameter": null,
"pagePhysicalPath": "F:\\develop\\xc_portal_static\\include\\",
"pageType": "0",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-02-08T05:55:07.590+0000",
"templateId": "5a962c16b00ffc514038fafd",
"pageParams": null,
"htmlFileId": "5a7be8e4d019f14d90a1fb21",
"dataUrl": null
},
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5a92141cb00ffc5a448ff1a0",
"pageName": "10101.html",
"pageAliase": "课程详情页面",
"pageWebPath": "/course/",
"pageParameter": null,
"pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
"pageType": "1",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-02-25T01:37:25.974+0000",
"templateId": "5a925be7b00ffc4b3c1578b5",
"pageParams": [
{
"pageParamName": "courseid",
"pageParamValue": "4028e581617f945f01617f9dabc40000"
}
],
"htmlFileId": "5a94d6c6b00ffc3ab4bfa4f4",
"dataUrl": null
},
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5a94d79cb00ffc3ab4bfa4f6",
"pageName": "4028e581617f945f01617f9dabc40000.html",
"pageAliase": "课程详情页面",
"pageWebPath": "/course/",
"pageParameter": null,
"pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
"pageType": "1",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-02-27T03:59:21.353+0000",
"templateId": "5a925be7b00ffc4b3c1578b5",
"pageParams": [
{
"pageParamName": "courseid",
"pageParamValue": "4028e581617f945f01617f9dabc40000"
}
],
"htmlFileId": "5aed94530e66185b64804c12",
"dataUrl": null
},
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5a96114fb00ffc4b44f63e06",
"pageName": "4028e58161bcf7f40161bcf8b77c0000.html",
"pageAliase": "课程详情页面",
"pageWebPath": "/course/",
"pageParameter": null,
"pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
"pageType": "1",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-02-28T02:17:45.785+0000",
"templateId": "5a925be7b00ffc4b3c1578b5",
"pageParams": [
{
"pageParamName": "courseid",
"pageParamValue": "4028e58161bcf7f40161bcf8b77c0000"
}
],
"htmlFileId": "5a962a07b00ffc514038faef",
"dataUrl": null
},
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5a961ff6b00ffc5a9cdebaea",
"pageName": "4028e58161bd22e60161bd23672a0001.html",
"pageAliase": "课程详情页面",
"pageWebPath": "/course/",
"pageParameter": null,
"pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
"pageType": "1",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-02-28T03:20:20.988+0000",
"templateId": "5a925be7b00ffc4b3c1578b5",
"pageParams": [
{
"pageParamName": "courseid",
"pageParamValue": "4028e58161bd22e60161bd23672a0001"
}
],
"htmlFileId": "5a962a0eb00ffc514038faf1",
"dataUrl": null
},
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5a9620b9b00ffc5a9cdebaed",
"pageName": "4028e58161bd3b380161bd3bcd2f0000.html",
"pageAliase": "课程详情页面",
"pageWebPath": "/course/",
"pageParameter": null,
"pagePhysicalPath": "F:\\develop\\xc_portal_static\\course\\detail\\",
"pageType": "1",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-02-28T03:28:02.459+0000",
"templateId": "5a925be7b00ffc4b3c1578b5",
"pageParams": [
{
"pageParamName": "courseid",
"pageParamValue": "4028e58161bd3b380161bd3bcd2f0000"
}
],
"htmlFileId": "5afc0e250e661870603bc0ed",
"dataUrl": null
},
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5abefd525b05aa293098fca6",
"pageName": "index2.html",
"pageAliase": "ccc",
"pageWebPath": "//fdsfs",
"pageParameter": "",
"pagePhysicalPath": "d:/html/",
"pageType": "1",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-03-31T03:14:49.771+0000",
"templateId": "5abf57965b05aa2ebcfce6d1",
"pageParams": null,
"htmlFileId": "5abf5ce45b05aa073c7e5172",
"dataUrl": "http://localhost:31001/cms/user/get/1"
},
{
"siteId": "5a751fab6abb5044e0d19ea1",
"pageId": "5ad92e9068db52404cad0f79",
"pageName": "preview_402885816243d2dd016243f24c030002.html",
"pageAliase": "课程预览页面",
"pageWebPath": "/coursepre/",
"pageParameter": null,
"pagePhysicalPath": "F:/eduprojects/xc-edu-snapshotv1.0/xc-ui-pc-static-portal/course/preview/",
"pageType": "1",
"pageTemplate": null,
"pageHtml": null,
"pageStatus": null,
"pageCreateTime": "2018-05-26T08:49:27.909+0000",
"templateId": "5aec5dd70e661808240ab7a6",
"pageParams": null,
"htmlFileId": "5b091f97c5e9b7070c94a2bb",
"dataUrl": "http://localhost:40200/portalview/course/getpre/402885816243d2dd016243f24c030002"
}
],
total: 50,
param: {
page: 1,
size: 10
}
}
},
methods: {
query: function () {
alert('查询')
},
changePage: function () {
this.query()
}
}
}
</script>