<template>
<!--编写页面静态部分，即view部分-->
<div>
<!--在table上添加按钮-->
<el-button type="primary" size="small" v-on:click="query">查询</el-button>
<!--相当于编写html的内容-->
<el-table
:data="list"
stripe
style="width: 100%">
<!---------------修改的列表中的prop属性值，与返回数据的属性名一致-------------------->
<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>
<!---------------修改的列表中的prop属性值，与返回数据的属性名一致-------------------->
</el-table>
<!--------------------添加的分页组件------------------------->
<el-pagination
layout="prev, pager, next"
:total="total"
:page-size="params.size"
:current-page="params.page"
v-on:current-change="changePage"
style="float:right">
</el-pagination>
<!--------------------添加的分页组件------------------------->
</div>
</template>
<script>
import * as cmsApi from '../api/cms';
//填写js代码，实现VM的功能，创建vue实例
export default {
data(){
return {
list:[],
total:50,//总条数
params:{
page:1,//页码
size:10,//每页显示个数
}
}
},
methods:{
//查询的点击事件
query:function () {
cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{
console.log(res);
this.list = res.queryResult.list;
this.total =res.queryResult.total;
})
},
//点击页面调用的change事件方法
changePage:function (page) {
this.params.page = page;//将传来的页面传给vm中定义页码变量
this.query(); //调用查询方法
}
},
mounted() {
//默认查询页面
this.query();
}
}
</script>
<style>
/*编写页面样式，不是必须*/
</style>
|
|
收藏
淘帖
踩
