2024年Web前端最全el-table 分页全选功能讲解_el-table全选(1)，2024年最新15个经典面试问题及回答思路图片

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

今天和大家一起学习一个 el-table 分页全选的功能

我们在用 el-table 组件的时候，肯定会用到分页功能，不管是长列表下拉分页还是用 element-UI 的 el-pagination 分页。

但是我们在具有选择功能的 el-table 的时候，会遇到一个问题，在点击进行分页之后，之前选择的数据没了，这个问题真的是困扰我良久。

在后面的我又开始面向百度开发，找到一个没有 bug 的方法这个方法是：

在 el-table 中，通过 @selection-change=“handleRowSelection” 和 :row-key=“getRowKeys”，

在第一行，也就是多选框的那一列上，加上 :reserve-selection=“true”, 直接上代码，仅供大家参考。

<template>

  <div>

    <el-table

      ref="table"

      :data="tableData"

      size="small"

      height="100%"

row-key=“id”

      @selection-change="handleSelectChange"

      @select="handleSelect"

    >

      <el-table-column width="50" type="selection" />

      <el-table-column type="index" label="序号" width="50">

        <template scope="scope">

          <span>{{

            (pageInfo.pageNo - 1) \* pageInfo.pageSize + scope.$index + 1

          }}</span>

        </template>

      </el-table-column>

      <el-table-column label="名称1" />

      <el-table-column label="名称2" />

      <el-table-column label="名称3" />

      <el-table-column label="名称4" />

      <el-table-column label="名称5" />

    </el-table>

  </div>

</template>



<script>

export default {

  data() {

    return {

      tableData: [],

      selectedObj: {},

      selectedData: []

    }

  },

  methods: {

    getList() {

      // 查数据的地方，处理分页选中状态

      this.handleRowSelection(this.tableData)

    },

    handleSelectChange(selection) {

      // 全选取消，删除当前页所有数据

      if (selection.length === 0) {

        this.tableData.forEach(item => {

          delete this.selectedObj[item.id]

        })

      }

      // 勾选数据 添加

      selection.forEach(item => {

        this.selectedObj[item.id] = item

      })



## 最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**