xiaoming_0208

已于 2023-09-13 11:38:15 修改

阅读量1.4k

点赞数

文章标签： vue.js 前端 javascript

于 2023-08-24 14:48:33 首次发布

本文链接：https://blog.csdn.net/xiaoming4965/article/details/132474062

版权

HTML代码

  <div v-for="(item, index) in currentData" :key="index" class="pushInfo-list">
            <div class="home-right-image">
              <el-image :src="basePicUrl + item.imageData" style="width: 100%" fit="contain"></el-image>
            </div>
            <div class="home-right-text">
              <div><span>摄像仪名称:{{ item.device }}</span></div>
              <div><span>所属区域:{{ item.area_name }}</span></div>
              <div><span>报警时间:{{ item.alertTime }}</span></div>
              <div><span>报警类型:{{ getDictType(item.alertType) }}</span></div>
            </div>
          </div>
//分页切换
   <div class="last-text">
          <button @click="prevPage">上一页</button>
          <button @click="nextPage">下一页</button>
     </div>

javaScrit代码

     data() {
    return {
        pushInfoList: [],// 从后端获取的全部数组
         currentData: [], // 当前显示的数据  
          totalPage: [], // 所有分页的数据
          pageSize: 3, // 每页显示数量
          pageNum: 1,  // 共几页=所有数据/每页现实数量     
          currentPage: 0, // 默认当前显示第一页  
        }
    }
//使用 async 执行异步操作

 async mounted() {
    await this.getAlertAnalysis();  //摄像仪列表初始化
    console.log(this.pushInfoList, 'this.pushInfoList');
    this.pageNum = Math.ceil(this.pushInfoList.length / this.pageSize) || 1;//计算有多少页数据，默认为1
    // 循环页面
    for (let i = 0; i < this.pageNum; i++) {
      this.totalPage[i] = this.pushInfoList.slice(this.pageSize * i, this.pageSize * (i + 1))
    }
    // 获取到数据后默认显示第一页内容
    this.currentData = this.totalPage[this.currentPage];
    console.log(this.currentData, 'this.currentData');
  },
  methods: { 

  //获取摄像仪在线/离线数量  async使用可确保异步操作在数据赋值完成后才会结束（例如使用             Promise、async/await 或回调函数等方式），以便在初始化过程中获取到最新的数据
    async getAlertAnalysis() {
      await alertAnalysis().then((response) => {
        this.pushInfoList = response.pushInfo;
      });
    },

    // 上一页&下一页切换
    prevPage() {
      if (this.currentPage === 0) return;
      this.currentData = this.totalPage[--this.currentPage];
    },

    nextPage() {
      if (this.currentPage === this.pageNum - 1) return;
      this.currentData = this.totalPage[++this.currentPage];
    },



}

代码引用链接https://www.cnblogs.com/mengdie1978/p/17436216.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <title>Document</title>
</head>
<body>
    <div id="app">
		
        <p v-for="item in dataShow" :key="item.id">{{item.id}}---{{item.name}}---{{item.age}}</p>

        <input type="button" value="上一页" @click="prePage">
        <span v-for="i in pageNum" @click="page(i)" :style="{cursor: 'pointer', margin:'10px'}">{{ i }}</span>
        <input type="button" value="下一页" @click="nextPage">
          
    </div>

    <script>

      var vm = new Vue({
          el:'#app',
          data:{
            data: [ //模拟数据
                {id:1,name:'小明',age:12},
                {id:2,name:'小王',age:12},
                {id:3,name:'小李',age:12},
                {id:4,name:'小赵',age:12},
                {id:5,name:'小黄',age:12},
                {id:6,name:'小刘',age:12},
                {id:7,name:'小张',age:12}
            ],
            totalPage: [], // 所有分页的数据
            pageSize: 2, // 每页显示数量
            pageNum: 1,  // 共几页=所有数据/每页现实数量     
            dataShow: [], // 当前显示的数据  
            currentPage: 0 // 默认当前显示第一页
          },
          created(){
            this.pageNum = Math.ceil(this.data.length / this.pageSize) || 1;//计算有多少页数据，默认为1

            // 循环页面
            for (let i = 0; i < this.pageNum; i++) {
            // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
            // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为2， 则第一页是1-2条，即slice(0,2)，第二页是3-4条，即slice(3,4)以此类推
            this.totalPage[i] = this.data.slice(this.pageSize * i, this.pageSize * (i + 1))
            }

            // 获取到数据后默认显示第一页内容
            this.dataShow = this.totalPage[this.currentPage];

          },
          methods:{
            // 下一页
            nextPage() {
              if (this.currentPage === this.pageNum - 1) return ;
              this.dataShow = this.totalPage[++this.currentPage];
            },
            // 上一页
            prePage() {
              if (this.currentPage === 0) return ;
              this.dataShow = this.totalPage[--this.currentPage];
            },
            // 点击页码
            page(i){
                this.currentPage = i
                this.dataShow = this.totalPage[i-1];
            }
        
          }
      })

    </script>
</body>
</html>