VUE에서 페이징 구성 요소를 구현하는 단계에 대한 자세한 설명

이번에는 VUE에서 페이징 구성 요소를 구현하는 방법에 대해 단계별로 자세히 설명하겠습니다. VUE에서 페이징 구성 요소를 구현하는 방법에 대한 참고 사항은 다음과 같습니다. 바라보다.

페이징은 웹 개발에서 매우 일반적인 기능입니다. 특히 다양한 프런트엔드와 백엔드가 분리되어 있는 오늘날에는 백엔드 API가 데이터를 반환하고 프런트엔드는 횟수를 기준으로 페이징 페이지 번호를 계산합니다. 데이터와 현재 페이지 번호 pageIndex를 가져와 페이지에 렌더링하는 매우 일반적이고 일반적인 기능입니다. 초기 jquery 시대부터 다양한 프론트엔드 프레임워크가 존재하는 현재 시대까지 페이지 매김 기능은 필수입니다.

대부분의 경우 (기본적으로) 페이징은 비동기 데이터 목록을 처리하는 것입니다. 여기서 먼저 페이징 프로세스를 이해해야 합니다.

각 페이지에 표시되는 데이터의 양 pageSize 및 현재 페이지 번호 pageIndex를 알고 있는 경우:

• API를 요청하고 첫 번째 화면 데이터(pageSize 이내)와 모든 관련 조건의 총 데이터 개수를 반환합니다.

• 총 데이터를 페이지 구성 요소에 전달하여 페이지 번호를 계산하고 페이지에 렌더링합니다.

  
  

• 페이지 번호를 클릭하고, 페이지 번호의 데이터를 가져오기 위한 요청을 보내고, 총 데이터 수와 페이지 번호 아래의 데이터 항목을 반환합니다.

  
  

데이터를 얻기 위한 조건의 변경(검색 및 키워드 변경 가정)으로 인해 개수가 불확실하거나 각 페이지에 표시되는 데이터의 양을 제어하는 ​​선택 드롭다운 상자가 있습니다. , 총 페이지 수도 확실하며 변경이 필요합니다. 따라서 페이지 번호를 다시 계산하여 렌더링해야 하는 경우가 많습니다.

프로세스를 이해하고 나면 Vue에서 페이징 구성 요소를 구현하는 것이 간단해집니다.

간단한 처리 스타일은 첫 번째 페이지에서 이전 페이지 및 홈 페이지 버튼이 비활성화되고, 다음 페이지 및 마지막 페이지 버튼이 비활성화됩니다. ...로 교체하면 렌더링은 다음과 같습니다:

데이터를 얻는 조건의 변경으로 인해(검색이고 키워드가 변경된다고 가정) 개수가 불확실하거나 각 페이지에 표시되는 데이터의 양을 제어하는 ​​선택 드롭다운 상자가 있습니다. , 총 페이지 수도 확실하며 변경이 필요합니다. 따라서 페이지 번호를 다시 계산하여 렌더링해야 하는 경우가 많습니다.

프로세스를 이해하고 나면 Vue에서 페이징 구성 요소를 구현하는 것이 간단해집니다.

간단한 처리 스타일은 첫 번째 페이지에서 이전 페이지 및 홈 페이지 버튼이 비활성화되고, 다음 페이지 및 마지막 페이지 버튼이 비활성화됩니다. ...로 대체하면 렌더링은 다음과 같습니다:

페이지 매김 구성요소
template

<template>
  <ul class="mo-paging">
    <!-- prev -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--prev&#39;, {&#39;paging-item--disabled&#39; : index === 1}]" @click="prev">prev</li>
    <!-- first -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--first&#39;, {&#39;paging-item--disabled&#39; : index === 1}]" @click="first">first</li>
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--more&#39;]" v-if="showPrevMore">...</li>
    <li :class="[&#39;paging-item&#39;, {&#39;paging-item--current&#39; : index === pager}]" v-for="pager in pagers" @click="go(pager)">{{ pager }}</li>
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--more&#39;]" v-if="showNextMore">...</li>
    <!-- last -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--last&#39;, {&#39;paging-item--disabled&#39; : index === pages}]" @click="last">last</li>
    <!-- next -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--next&#39;, {&#39;paging-item--disabled&#39; : index === pages}]" @click="next">next</li>
  </ul>
</template>

스타일(scss)

.mo-paging {
  display: inline-block;
  padding: 0;
  margin: 1rem 0;
  font-size: 0;
  list-style: none;
  user-select: none;
  > .paging-item {
    display: inline;
    font-size: 14px;
    position: relative;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: -1px;
    cursor: pointer;
    color: #0275d8;
    &:first-child {
      margin-left: 0;
    }
    &:hover {
      background-color: #f0f0f0;
      color: #0275d8;
    }
    &.paging-item--disabled,
    &.paging-item--more{
      background-color: #fff;
      color: #505050;
    }
    //禁用
    &.paging-item--disabled {
      cursor: not-allowed;
      opacity: .75;
    }
    &.paging-item--more,
    &.paging-item--current {
      cursor: default;
    }
    //选中
    &.paging-item--current {
      background-color: #0275d8;
      color:#fff;
      position: relative;
      z-index: 1;
      border-color: #0275d8;
    }
  }
}

자바스크립트

export default {
  name : 'MoPaging',
  //通过props来接受从父组件传递过来的值
  props : {
 
    //页面中的可见页码，其他的以...替代, 必须是奇数
    perPages : { 
      type : Number,
      default : 5 
    },
 
    //当前页码
    pageIndex : {
      type : Number,
      default : 1
    },
 
    //每页显示条数
    pageSize : {
      type : Number,
      default : 10
    },
 
    //总记录数
    total : {
      type : Number,
      default : 1
    },
 
  },
  methods : {
    prev(){
      if (this.index > 1) {
        this.go(this.index - 1)
      }
    },
    next(){
      if (this.index < this.pages) {
        this.go(this.index + 1)
      }
    },
    first(){
      if (this.index !== 1) {
        this.go(1)
      }
    },
    last(){
      if (this.index != this.pages) {
        this.go(this.pages)
      }
    },
    go (page) {
      if (this.index !== page) {
        this.index = page
        //父组件通过change方法来接受当前的页码
        this.$emit(&#39;change&#39;, this.index)
      }
    }
  },
  computed : {
 
    //计算总页码
    pages(){
      return Math.ceil(this.size / this.limit)
    },
 
    //计算页码，当count等变化时自动计算
    pagers () {
      const array = []
      const perPages = this.perPages
      const pageCount = this.pages
      let current = this.index
      const _offset = (perPages - 1) / 2
 
 
      const offset = {
        start : current - _offset,
        end  : current + _offset
      }
 
      //-1, 3
      if (offset.start < 1) {
        offset.end = offset.end + (1 - offset.start)
        offset.start = 1
      }
      if (offset.end > pageCount) {
        offset.start = offset.start - (offset.end - pageCount)
        offset.end = pageCount
      }
      if (offset.start < 1) offset.start = 1
 
      this.showPrevMore = (offset.start > 1)
      this.showNextMore = (offset.end < pageCount)
 
      for (let i = offset.start; i <= offset.end; i++) {
        array.push(i)
      }
 
      return array
    }
  },
  data () {
    return {
      index : this.pageIndex, //当前页码
      limit : this.pageSize, //每页显示条数
      size : this.total || 1, //总记录数
      showPrevMore : false,
      showNextMore : false
    }
  },
  watch : {
    pageIndex(val) {
      this.index = val || 1
    },
    pageSize(val) {
      this.limit = val || 10
    },
    total(val) {
      this.size = val || 1
    }
  }
}

상위 구성 요소에서

<template>
  <p class="list">
    <template v-if="count">
      <ul>
        <li v-for="item in items">...</li>
      </ul>
      <mo-paging :page-index="currentPage" :totla="count" :page-size="pageSize" @change="pageChange">
      </mo-paging>
    </template>
  </p>
</template>
<script>
  import MoPaging from './paging'
  export default {
    //显示的声明组件
    components : {
      MoPaging 
    },
    data () {
      return {
        pageSize : 20 , //每页显示20条数据
        currentPage : 1, //当前页码
        count : 0, //总记录数
        items : []
      }
    },
    methods : {
      //获取数据
      getList () {
        //模拟
        let url = `/api/list/?pageSize=${this.pageSize}¤tPage=${this.currentPage}`
        this.$http.get(url)
        .then(({body}) => {
 
          //子组件监听到count变化会自动更新DOM
          this.count = body.count
          this.items = body.list
        })
      },
 
      //从page组件传递过来的当前page
      pageChange (page) {
        this.currentPage = page
        this.getList()
      }
    },
    mounted() {
      //请求第一页数据
      this.getList()
    } 
  }
</script>

를 사용하세요. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요.

추천 도서:

Vue-Router

vue에서 Particles.js 라이브러리를 사용하는 방법

BootStrap 작업 데이터 테이블

위 내용은 VUE에서 페이징 구성 요소를 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!