写一个表格，通过分页功能将内容完全展示出来

最新推荐文章于 2021-10-19 15:11:25 发布

Velocityy

最新推荐文章于 2021-10-19 15:11:25 发布

阅读量177

点赞数 1

分类专栏： Vue的一些逻辑，语句写法 Element里修改一些样式文章标签： vue.js

本文链接：https://blog.csdn.net/Velocityy/article/details/103634838

版权

Vue的一些逻辑，语句写法同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Element里修改一些样式

3 篇文章 0 订阅

订阅专栏

简单来说就是：前端分页~
参考自 https://blog.csdn.net/weixin_44313369/article/details/100579078

HTML：

 <el-tab-pane label="最新信息" name="first" style="padding: 5px 15px 5px;" >
            <el-table :data="newInfo.slice((currPage-1)*pageSize, currPage*pageSize)" style="width: 100%;">
              <el-table-column prop="time" width='120' label="时间"></el-table-column>
              <el-table-column prop="type" label="任务类型" fit></el-table-column>
              <el-table-column prop="msgFrom" label="发送方" fit></el-table-column>
              <el-table-column prop="msgReceive" label="接受方" fit></el-table-column>
              <el-table-column prop="status" label="任务状态" fit></el-table-column>
            </el-table>
             <div class="block" style="margin-top: 5px; margin-bottom: 5px;" >
           <el-pagination  layout="prev, pager, next"  
           :current-page.sync="currPage" 
           :page-size=pageSize 
           @size-change="handleSizeChange"
            @current-change="handleCurrentChange" 
            :total="36" style="text-align: center;"> </el-pagination>
       </div>
          </el-tab-pane>

JS：

return{
        currPage:1,
        pageSize:2,
        newInfo: [
       {time:'第一页',
          type:'000',
          msgFrom:'11',
          msgReceive:'1111',
          status:'111'
      },
       {time:'000',
          type:'000',
          msgFrom:'11',
          msgReceive:'1111',
          status:'111'
      },
       {time:'第二页',
          type:'000',
          msgFrom:'11',
          msgReceive:'1111',
          status:'111'
      },
       {time:'000',
          type:'000',
          msgFrom:'11',
          msgReceive:'1111',
          status:'111'
      }]
        }
methods:{
    handleSizeChange(val) {
        this.pageSize = val;
        this.currPage = 1;
      },
    handleCurrentChange(val) {
       this.currPage = val;
    }
}