vue使用element分页组件

vue使用element分页组件

2020/12/14

<div v-if="detail.list && detail.list.length > 0">
   <div>
      <div
         @click="ClickNews(index)"
         :class="
           xiao_xuan == index
             ? 'news-contsin_item news-contsin_item-active'
             : 'news-contsin_item'
         "
         v-cloak
         v-for="(item, index) in detail.list"
         :key="index"
         v-html="item.detial"
       ></div>
    </div>
    <!-- 页码 -->
    <div class="follow-contsin-yema" v-show="yema_show">
       <!-- page-size每页数量，total每页数量*总页数，current-page当前页 -->
       <el-pagination
         :page-size="detail.pageSize"
         layout="prev, pager, next"
         :total="detail.countnum"
         :current-page="currentpage"
         @current-change="currentChange"
         @prev-click="prevClick"
         @next-click="nextClick"
       >
       </el-pagination>
    </div>
</div>
<!-- 没有消息显示的 -->
<div class="news-contsin_wu" v-else>
   <img src="../../assets/images/icon/wu.png" alt="" />
</div>

data() {
    return {
      yema_show: false, //只有一页时候隐藏
      xiaoList: [], //消息数据
      xiao_xuan: -1,
      detail: "",
      currentpage: 1,
    };
},
created() {
    let self = this;
    self.AllList(self.currentpage);
},
methods: {
    // 基本信息
    AllList(page) {
      let self = this,
        timestamp = self.$NowTimes();
      if (localStorage.getItem("Token") && localStorage.getItem("user_id")) {
        let data = {
          timestamp: timestamp,
          uid: localStorage.getItem("user_id"),
          page: page + "",
        };
        let newtoken = self.$jmToken(data, localStorage.getItem("Token"));
        self
          .$post("/index/noticeList", data, newtoken)
          .then((res) => {
            if (res.code == 200) {
              self.detail = res.data;
              self.currentpage = Number(res.data.pageno);
              if (
                res.data.countnum > res.data.pageSize &&
                res.data.countnum &&
                res.data.countnum != 0
              ) {
                self.yema_show = true;
              } else {
                self.yema_show = false;
              }
            } else {
              self.$message(res.msg);
            }
          })
          .catch((err) => {
            console.log("错误", err);
            self.$message(err.msg);
          });
      } else {
        self.$message("请先登录");
      }
    },
    // 当前页面改变触发
    currentChange(e) {
      let self = this;
      // console.log("当前页面改变触发",e);
      self.AllList(e);
    },
    // 点击上一页触发
    prevClick(e) {
      let self = this;
      // console.log("点击上一页触发",e);
      self.AllList(e);
    },
    // 点击下一页触发
    nextClick(e) {
      let self = this;
      // console.log("点击下一页触发",e);
      self.AllList(e);
    },
}