el-pagination分页用法总结

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

1. 展示数据

<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>

2. 定义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
    }
  }

3. 写方法

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)
    }
  }