vue手写分页

效果图如下：

 样式可以自己随便设置

html代码：

                <div class="page-bar">
                  <ul>
                    <li>
                      <a style="border: none;padding: 6px 8px;"
                        >总共<i>{{ total }}</i
                        >个项目</a
                      >
                    </li>
                    <li v-if="cur>1">
                      <a v-on:click="cur--,pageClick()">＜</a>
                    </li>
                    <li v-if="cur==1"><a class="banclick">＜</a></li>
                    <li
                      v-for="index in indexs"
                      v-bind:class="{ 'active': cur == index}"
                    >
                      <a v-on:click="btnClick(index)">{{ index }}</a>
                    </li>
                    <li v-if="cur!=all">
                      <a v-on:click="cur++,pageClick()">＞</a>
                    </li>
                    <li v-if="cur == all"><a class="banclick">＞</a></li>
                  </ul>
                </div>

css代码：

/*分页*/
.page-bar{
  width: 540px;
  height: 30px;
  margin: 40px 20px 30px 555px;
  margin-top: 10px;
  margin-bottom: 30px;
  position: absolute;
  bottom: 10px;
  }
  ul,li{
  margin: 0px;
  padding: 0px;
  }
  li{
  list-style: none
  }
  .page-bar li:first-child>a {
  margin-left: 0px
  }
  .page-bar a{
  border: 1px solid #ddd;
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #5D6062;
  cursor: pointer;
  margin-right: 4px;
  }
  .page-bar a:hover{
  background-color: #eee;
  }
  .page-bar a.banclick{
  cursor:not-allowed;
  }
  .page-bar .active a{
  color: #fff;
  cursor: default;
  background-color: #C98743;
  border-color: #C98743;
  }
  .page-bar i{
  font-style:normal;
  margin: 0px 4px;
  font-size: 12px;
  }

js代码：

     data{
        all: 0, //总页数
          cur: 1, //当前页码
          totalPage: 5, //当前条数
          total:0,//总数
        }
   





//这个是分页数据的接口，替换成自己的数据接口就行
             zhengdanList(index,demandtypeDate){
            const _this = this
            const params = {
              page: index||1,
              size: this.totalPage,
              status: demandtypeDate||1,
            }
            $.ajax({
              url: `https://common-api${getEnv()}.homedo.com/bff-common-api/solicitationFor/singleTable`,
              type: 'POST',
              headers:{ticket:$HMD$.Cookie('ticket')},
              data: JSON.stringify(params),
              dataType: 'json',
              contentType: 'application/json',
              success: function (res) {
                if(res.respCode == '0000' && res.data && res.data.items){
                  _this.demandList = res.data.items
                  _this.total = res.data.count
                  _this.all = Math.ceil(res.data.count / res.data.size) //总页数
                  _this.cur = res.data.page //当前页码
                  _this.totalPage = res.data.size //当前条数
                }
              },

           //分页
          btnClick(data) {
            //页码点击事件
            if (data != this.cur) {
              this.cur = data
            }
            //根据点击页数请求数据
            this.tab2(this.cur.toString())
          },
          pageClick() {
            //根据点击页数请求数据
            this.tab2(this.cur.toString())
          },