后端返回表格数据，前端实现分页功能

顾辰呀

已于 2024-06-24 19:43:41 修改

阅读量205

点赞数

文章标签：前端 vue.js elementui

于 2023-10-19 14:20:40 首次发布

本文链接：https://blog.csdn.net/weixin_45776545/article/details/133925707

版权

            <!-- 表格区域 -->
            <el-table
              :data="tableDataComputed2"
              tooltip-effect="dark"
              style="width: 100%"
              max-height="205px"
              stripe
              :header-cell-style="{
                background: '#f1f3f5',
                color: '#000000'
              }"
            >
              <template slot="empty">
                <p class="emptyText">暂无数据</p>
              </template>
              <el-table-column align="center" prop="salesmanName" label="业务员"             sortable> </el-table-column>
              <el-table-column align="center" prop="sum" label="总计" sortable> </el-table-column>

            </el-table>

            <el-pagination
              @size-change="handleSizeChange($event, 2)"
              @current-change="handleCurrentChange($event, 2)"
              :current-page="salesmanPage.currentPage"
              :page-sizes="[5, 10, 50, 100]"
              :page-size="salesmanPage.pageSize"
              :total="salesmanTableData.length"
              layout="total, sizes, prev, pager, next, jumper"
              background
            >
            </el-pagination>

salesmanTableData: [],  // data 中定义

      salesmanPage: {   // data 中定义
        total: 0,
        currentPage: 1,
        pageSize: 5
      },

  computed: {
    tableDataComputed2 () {
      const { currentPage, pageSize } = this.salesmanPage
      return this.salesmanTableData.slice((currentPage - 1) * pageSize, currentPage *     pageSize)
    },

  },

     // methods

    handleSizeChange (val) {
      this.salesmanPage.pageSize = val
    },

    handleCurrentChange (val) {
      this.salesmanPage.currentPage = val
     
    },


 this.salesmanTableData = res.data   // 后端数据