el-pagination分页用法总结

最新推荐文章于 2025-03-10 23:58:06 发布

原创最新推荐文章于 2025-03-10 23:58:06 发布 · 710 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

element-ui 同时被 2 个专栏收录

2 篇文章

订阅专栏

el-pagination

1 篇文章

订阅专栏

该博客主要围绕Vue展开，实现了数据分页展示功能，当active数据改变时会切换样式。具体步骤包括展示数据、定义data以及编写相关方法。

实现功能：对数据进行分页展示，active数据改变样式

展示数据

<div  v-for="(v, k) in showNews" :key="k">
	   <div :class="[activeIndex == k ? 'active' : '', 'item']" @click="checkItem(k)">
		       {{v.date}}
	   </div>
 </div>

  <el-pagination
   background
   layout="total, prev, pager, next"
   :total="news.length"
   :current-page="currentPage"
   :page-size="pagesize"
   @current-change="handleCurrentChange"
   ></el-pagination>

定义data

data () {
    return {
      news: [
        { date: '2020/7/10' },
        { date: '2019/10/15' },
        { date: '2018/7/10' },
        { date: '2017/7/10' }
      ],
      checkedItems: [],
      checkedItem: { date: '2020/7/10' },
      activeIndex: 0,
      pagesize: 3,
      currentPage: 1
    }
  }

写方法

computed: {
	// 根据分页条件展示的数据
    showNews () {
      return this.news.slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize)
    }
  },
  methods: {
    checkItem: function (k) {
      this.checkedItems = this.showNews.filter((item, index) => {
        if (index === k) {
          this.activeIndex = k
          return item
        }
      })
      this.checkedItem = this.checkedItems[0]
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.checkItem(0)
    }
  }