VUE结合elementui实现分页器列表

<template>
  <div>
    外贸知识
    <div class="art-box">
        <div class="art-item-box">
            <div class="art-item" v-for="(art, index) in paginatedArtList" :key="index">
              <a :href="art.artsrc">
              <img :src="art.imgsrc" alt="">
                {{art.title}}</a> 
            </div>
        </div>
      
      <!-- 分页器 -->  
        <!-- <div class="pagination">  
            <button @click="currentPage--" :disabled="currentPage === 0">  
                上一页  
            </button>  
            <span>当前页: {{ currentPage + 1 }}</span>  
            <button @click="currentPage++" :disabled="currentPage >= Math.ceil(artList.length / 2) - 1">  
                下一页  
            </button>  
        </div>   -->

        <div class="fenyeqi-box">
          <!-- <span class="demonstration">大于 7 页时的效果</span> -->
          <el-pagination
          layout="prev, pager, next"
          v-model="currentPage"  
          :page-count="totalPages"
          @current-change="handleCurrentChange">  <!-- 监听页码变化事件 -->
        </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Knowledge",
  data() {
    return {
      currentPage: 0, // 当前页码
    };
    // artList:[]
  },
  computed: {
    artList() {
      return this.$store.state.artList;
    },
    paginatedArtList() {
      const start = this.currentPage * 9;
      const end = start + 9;
      return this.artList.slice(start, end);
    },
    totalPages() {
      // 计算总页数
      return Math.ceil(this.artList.length / 9);  // 每页显示9条数据
    },
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page - 1; // ElementUI 分页器从 1 开始，而我们的计算从 0 开始，需要转换一下
    },
    //  currentPage(step = 1) {  
    //         this.currentPage = Math.max(0, Math.min(this.currentPage + step, Math.ceil(this.artList.length / 2) - 1));  
    //     }
  },
  mounted(){
    console.log(this.totalPages);
  }
};
</script>

<style coped>
.art-box{
    max-width: 1200px;
    margin: auto;
}
.art-item-box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-around;*/
}
.art-item{
    width: 27%;
    margin: 3%;
    /*background-color: #cccccc;*/
}
.art-item img{
    width: 100%;
    display: block;
    box-shadow: 1px 1px 10px 5px #cccccc ;
    margin-bottom: 20px;
    transition: all 0.5s;
}
.art-item img:hover{
  transform: scale(1.1);
}
.art-item a{
    /* margin-top: 5px; */
    display: block;
    text-align: center;
    margin: auto;
}
.fenyeqi-box{
  display: block;
  text-align: center;
}
</style>