vue+element 实现简单分页 自定义内容

<template>
 <div>
  <div class="content">
      <div
        class="item"
        v-for="(item,i) in allList.slice(
          (currentPage - 1) * pagesize,
          currentPage * pagesize
        )"
        :key="item.id"
      >
        <div class="data">
          <div class="data_left">
            <div>{
   
   { item.title }}</div>
            <div>{
   
   { item.mdate }}</div>
            <div>{
   
   { item.ydate }}</div>
          </div>
          <div class="data_center">
            <img src="../assets/img/journalism/news_cover.png" alt="" />
          </div>
          <div class="data_right">
            <div>51大师兄连麦新功能重磅上线</div>
            <div class="data_right_content">
              51大师兄互动直播连麦新功能已正式上线!轻松让您实现与大咖面对面交流，一起来体验直播连线新功能更多的“哇塞”之处吧!
            </div>
            <div>
              <router-link class="a" :to="`/details/?id=${i}`">查看全文</router-link>
              <div class="data_right_top">
                <img src="../assets/img/journalism/浏览 [email protected]" alt="" />
                {
   
   { item.weigh }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5]"
        :page-size="pagesize"
        layout="prev, pager, next"
        background
        :total="allList.length"
      >
      </el-pagination>
    </div>
 </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 5, // 每页的数据
      allList: [],
    };
  },
  methods: {
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },

    handleUserList() {
      this.axios.get("/api/index/getNewsList").then((rsp) => {
        this.allList = rsp.data.data.data;
        console.log(this.allList);
      });
    },
  },
  mounted() {
    this.handleUserList();
  },
};
</script>
<style>
.content {
    padding: 1rem 3rem;
  }
.data {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  .data_left {
    width: 10%;
    text-align: center;
    div:nth-child(1) {
      height: 0.6667rem;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      line-height: 0.6667rem;
      background: linear-gradient(219deg, #8f99ed 0%, #b8ceef 100%);
    }
    div:nth-child(2) {
      font-size: 26px;
      font-weight: 500;
      line-height: 30px;
      margin: 17px 0 12px 0;
    }
    div:nth-child(3) {
      font-size: 28px;
      font-weight: 600;
      color: #dadada;
      line-height: 33px;
    }
  }
  .data_center {
    width: 30%;
    img {
      width: 100%;
    }
  }
  .data_right {
    position: relative;
    width: 55%;
    div:nth-child(1) {
      font-size: 24px;
      font-weight: 500;
      color: #000000;
      line-height: 28px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .data_right_content {
      font-size: 16px;
      font-weight: 400;
      color: #a1a1a1;
      line-height: 24px;
      margin: 0.3704rem 0 0.7037rem 0;
    }
    .a {
      font-size: 16px;
      font-weight: 400;
      color: #007aff;
      line-height: 40px;
      text-decoration: none;
    }
    div:nth-child(3) {
      width: 100%;
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: space-between;
    }
    .data_right_top {
      display: inline-block;
      font-size: 16px;
      font-weight: 400;
      color: #dadada;
      line-height: 19px;
    }
  }
}
</style>