vue-element-ui表格添加分页功能

最新推荐文章于 2024-06-16 22:42:41 发布

指舞花歌

最新推荐文章于 2024-06-16 22:42:41 发布

阅读量388

点赞数

分类专栏： Vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_39262215/article/details/121974862

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

废话不多说，直接上代码：

<!-- 轨迹明细弹框 -->
    <el-dialog title="轨迹明细" :visible.sync="dialogTableVisible">    
      <el-table :data="gridData.slice((currentPage-1)*pagesize,currentPage*pagesize)">
        <el-table-column property="outbound_sender_addr" label="设备卡号" width="150"></el-table-column>
        <el-table-column property="longitude" label="经度(°)"></el-table-column>
        <el-table-column property="latitude" label="纬度(°)"></el-table-column>
        <el-table-column property="altitude" label="海拔(m)"></el-table-column>
        <el-table-column property="datetime" label="定位时间">
          <template slot-scope="{row}">             
            <span>{{ $moment(row.datetime).format("YYYY-MM-DD HH:mm:ss") }}</span>
          </template>
        </el-table-column>
        
      </el-table>

      <el-pagination
        class="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="trackpoints">
      </el-pagination>

    </el-dialog>

data()：

return {
    gridData: [],                    // 轨迹明细数据（后端请求赋值）
    trackpoints: 0,                  // 轨迹点数
    // 分页
    currentPage:1,
    pagesize:10,
}

methods:

    // 分页
    handleSizeChange: function (size) {
        this.pagesize = size;
    },

    handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
    },