element-ui table 前端分页

直接上代码吧。

<el-table
        ref="customerListTable"
        border
        :data="dataSource2"
        v-loading="loading"
        :row-style="{ height: '55px' }"
        header-cell-class-name="table-header"
        row-class-name="table-row"
        style="width: 100%"
      >
        <el-table-column type="index" label="#" align="center" width="40" />
        <el-table-column
          align="center"
          label="平台代码"
          prop="spareCode"
          width="180px"
        />
        <el-table-column align="center" label="操作" fixed="right" width="50">
          <template slot-scope="scope">
            <a @click="handleDelete(scope.row)"> 删除 </a>
          </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          :total="dataTotal.length"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

JS

data:{
  return {
    dataSource2: [], //页面显示数据
      dataTotal: [], //总数据
 page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      }
   }

// 分页计算
    pagingOperation() {
      var keyValue = 0;
      //这里需要注意一下全部数据和你页面上的数据是同一个数据，只不过页面显示的是我们处理成10条数据
      var data = this.dataTotal; //全部数据
      for (var i = 0; i < data.length; i++) {
        keyValue = keyValue + 1;
        let key = { key: keyValue };
        data[i] = Object.assign(data[i], key);
      }

      var start =
        this.page.pageSize * this.page.currentPage - this.page.pageSize;
      var end = this.page.pageSize * this.page.currentPage;
      this.dataSource2 = data.slice(start, end);
    },
 // 每页条数改变函数
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.pagingOperation();
    },
    //当前页改变函数
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.pagingOperation();
    },

这里有个删除逻辑（你可以用可不用）；
1，删除逻辑要考虑到当页码为第二页，总数据为11条，这时你删除第二页的第一条后，页面应该回到第一页，然后数据为10条。

handleDelete(record) {
      // 更新数据源
      this.dataSource2 = this.filterItems(this.dataSource2, record);
      this.dataTotal = this.filterItems(this.dataTotal, record);
      // 计算当前页面的数据总数
      const totalItems = this.dataSource2.length;
      //   currentPage: 1, // 当前页数 pageSize: 10, // 每页显示多少条
      // 检查当前页是否还有数据
      if (
        totalItems < this.page.currentPage * this.page.pageSize &&
        this.page.currentPage > 1
      ) {
        // 如果当前页没有数据且不是第一页，调整到上一页
        this.page.currentPage--;
      }
      //再次调用分页操作
      this.pagingOperation();
      this.$forceUpdate();
    },

当然这里面只是个人理解，如果你用到这段代码 然后有更好的实现方式 恳请留言。或者直接附上代码，我做更新 以便后续遇到直接使用；感谢！

原文地址：https://blog.csdn.net/weixin_45844542/article/details/143052333

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！