黑马程序员技术交流社区

标题: 【石家庄校区】学习经历 [打印本页]

---

作者: 王晓艺    时间: 2019-9-10 14:45
标题: 【石家庄校区】学习经历
<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>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2