第一个实习项目：基于vue和elementUI封装分页组件

前提：

         当然需要一些基础的技术支持

        1.git:用来在版本库里拉取项目，通俗的讲就是在GitHub，GitEE等库里下载项目，其中关于git的一些重要命令，git clone +URL（项目地址：可以在版本库里复制）用来在版本库里拉取项目。提交项目就有一些麻烦。主要用到三个命令吧，具体用法还是百度吧，我这写的肯定不全

        2.vue-cli:这个就很重要了，没有这个vue项目就运行不起来，当然安装这个脚手架的前提是你得安装Node.js。因为你得使用npm 命令来安装脚手架，当然后期写项目需要用到的一些插件，框架啊，都得需要这个。很重要的一点就是npm 得配置淘宝镜像啊，不然下东西贼慢。当然cnpm也可以下载，不过这个东西总是出错。

        3.前期环境准备工作弄好后，就可以开始写功能了，对了，vue的一些基础知识很重要

编码：

        我主要的就是实现分页功能，样式如下：

 看着挺简单的，但是对于我这个新手来说，一点也不简单。

        1.样式的制作：其中注意的是，在vue中空格也就是&nbsp；这个东西是没有用的。的需要用到v-html进行空格的插入。其他的就挺好做的

        2.功能的制作：分页功能吧，其实有两种形式的分页，真分页和假分页，真分页就是数据在后端也就是数据库中请求的时候就已经做好了分页，假分页就是将数据库中数据都请求出来，然后在前端实现分页，因为给我的项目中数据就已经是固定的了，所以我实现的是假分页。

        3.分页组件的代码如下：

<template>
  <div id="pagination">
    <div id="page">
      <a href="#" class="pre" @click="toPre(currentPage)">&lt;</a>
      <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'"></span>
      <input type="text" v-model="currentPage" @blur="checkPage"  /><span v-html="'&nbsp;&nbsp;'"></span>/
      <span v-html="'&nbsp;'"></span>
      <span>{{ totalPage }}</span>
      <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'"></span>
      <a href="#" class="next" @click="toNext(currentPage)">&gt;</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "myPagination",
  props: {
    tPages: {
      //接收表格组件传来总页数
      type: Number,
      require: false,
    },
	cPage:
	{
		type: Number,
		default:1
	}
  },
  created: function () {
    this.sTf();
  },
  data() {
    return {
      currentPage: 1, //当前页面设为1
      totalPage: this.tPages,
    };
  },
  // watch: {									//通过watch监听input输入框的变化
  //   currentPage: function (newVal) {
	// 		this.$emit("change",newVal);
  //   },
  // },
  methods: {
    toPre(currentPage) {
      if (currentPage <= 1) {
        this.currentPage = 1;
      } else {
        this.currentPage--;
      }
      this.sTf();
    },
    toNext(currentPage) {
      if (currentPage >= this.totalPage) {
        this.currentPage = this.totalPage;
      } else {
        this.currentPage++;
      }
      this.sTf();
    },
    sTf() {										//此方法实现子组件向父组件传值
      this.$emit("change", this.currentPage);   //将当前页数传给表格组件
    },
    checkPage()
    {
      if(this.currentPage<1)
      {
        this.currentPage=1;
        this.sTf();
      }
      else if(this.currentPage>this.totalPage)
      {
        this.currentPage=this.totalPage;
        this.sTf();
      }
      else
      {
        this.sTf();
      }
      
    }
  },
};
</script>
	
<style>
  #pagination{
    padding-top: 10px;
  }
	#page {
		width: 200px;
		height: 30px;
		margin: 0 auto;
	}
	a {
		text-decoration: none;
		color: #333;
	}
	input {
		width: 45px;
		height: 21px;
		vertical-align: middle;
		line-height: 20px;
		text-align: center;
	}
</style>

         4：组件的引用

<template>
  <div>
    <el-table
      v-loading="listLoading"
      :data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="Title">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Pageviews" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.pageviews }}
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="Status"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{
            scope.row.status
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="Display_time"
        width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--添加分页组件-->
    <myPagination  :tPages="totalPage"  v-if="flag" @change="change" ></myPagination>
  </div>
</template>

<script>
import {getList} from '@/api/table.js'                              //因为getlist是方法，所以加大括号
import myPagination from '@/components/Pagination/myPagination.vue' //引入分页组件，切记不要加大括号

export default {
  components: { myPagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      flag:false,
      list: [],
      currentPage: 1,           // 当前显示页,现在不影响
      pageSize: 4,              // 每页显示数据条数
      total: 0,                 // 数据总数
      totalPage: 0              //数据总页数
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
        this.listLoading = true
        getList().then((response) => {
        this.list = response.data.items
        this.total = response.data.total
        this.totalPage=Math.ceil(response.data.total/this.pageSize);    //计算数据的总页数
        this.flag=true;
        this.listLoading = false
      })
    },
   change(val){
      this.currentPage=val;
   }

  }
}
</script>