使用Vue制作自定义风格的分页

// 使用Element-ui的分页会更加方便，这里仅是个菜鸟的练习

vue：

<!--自己的实现分页方法-->
<ul>
  <li>
    <a href="#!" @click="searchUserList(1)">首页</a>
  </li>

  <!--动态的加style-->
  <li>
    <a href="#!" @click="searchUserList(prevPage)"
         :style="currentPage == 1 ?
         'pointer-events: none; color: red' :
         'pointer-events: auto; color: green'">上一页</a>
  </li>

  <!--Vue直接遍历数字-->
      <!--
      <li v-for="(index) of totalPage">
        <a href="#!" @click="searchUserList(index)"
        :style="currentPage == index ? 'color: #B25BFF' : 'color: pink'">{{index}}</a>
      </li>
  -->
      <li v-for="item of pageNums">
         <a href="#!" @click="searchUserList(item)"
            :style="currentPage == item ? 'color: #B25BFF' : 'color: pink'">{{item}}</a>
      </li>

  <!--动态的加class-->
  <li>
    <a href="#!" @click="searchUserList(nextPage)"
         :class="currentPage == totalPage ?
         'btn-disabled' :
         'btn-active'">下一页</a>
  </li>

  <li>
    <a href="#!" @click="searchUserList(totalPage)">尾页</a>
  </li>

  <li>
    跳转到<input class="page-input" @keyup.enter="searchUserList(forwardPage)" v-model="forwardPage"/>页
  </li>
</ul>

js：

data() {
  return {
    totalPage: 1,
    currentPage: 1,
    totalCount: 1,
    pageSize: 8,
    userList: [],
    delUserId: '',
    forwardPage: '',
    dialogVisible: false
  }
},

  // 分页请求的方法

// 这里是方法methods：
searchUserList(curPage) {
  if (curPage == null || curPage == 'undefined') {
    curPage = 1;
    this.forwardPage = curPage;
  } else if (curPage <= 0) {
    curPage = 1;
    this.forwardPage = 1;
  } else if (curPage > this.totalPage) {
    curPage = this.totalPage;
    this.forwardPage = this.totalPage;
  } else {
    this.forwardPage = curPage;
  }
  this.currentPage = Number(curPage);
  // 分页
  axiosRequest({
    url: '/api/seaUrList/' + curPage,
    method: 'get'
  }).then(res => {
    this.currentPage = res.data.resultMap.currentPage;
    this.totalPage = res.data.resultMap.totalPage;
    this.totalCount = res.data.resultMap.totalCount;
    this.pageSize = res.data.resultMap.pageSize;
    this.userList = res.data.resultMap.urPageList;
    }, error => {
    this.$notify.error({
      title: '错误',
      message: '获取数据失败！'
    });
  })
}

// 这里是计算属性computed：
// 这里主要通过这个方法动态的生成页码
pageNums() {
  let left = 1;
  let right = this.totalPage;
  let pageArr = [];
  if (this.totalPage > 5) {
  if (this.currentPage > 3 && this.currentPage <= this.totalPage - 2) {
    left = this.currentPage - 2;
    right = this.currentPage + 2;
  } else {
    if (this.currentPage <= 3) {
      left = 1;
      right = 5;
    } else {
      left = this.totalPage - 4;
      right = this.totalPage;
    }
  }
  while (left <= right) {
    pageArr.push(left);
    left++;
  }
  return pageArr;
}

css：

.user-list-cls{
  margin: 10px auto;
  width: 800px;
  border: 1px solid black;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
}

a {
  text-decoration: none;
}

a:hover {
  cursor: pointer;
  color: blue;
}

ul li{
  list-style: none;
  display: inline;
  padding-left: 30px;
}

li:first-child {
  padding-left: unset;
}

.btn-disabled{
  pointer-events: none;
  color: red;
}

.btn-active{
  pointer-events: auto;
  color: green;
}

.page-input{
  margin-left: 5px;
  margin-right: 5px;
  width: 27px;
}

效果：

与Element-ui的效果进行对比（下）