2024年最全el-table 分页全选功能讲解_el-table全选，前端中高级面试题

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

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

  

  

在后面的我又开始面向百度开发，找到一个没有 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

      })

      // 获取所有分页勾选的数据

      this.selectedData = []

      for (const key in this.selectedObj) {

        this.selectedData.push(this.selectedObj[key])



### 文末
篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

![](https://img-blog.csdnimg.cn/img_convert/04273c2f50e58b6822663c5b2f379206.png)  

![](https://img-blog.csdnimg.cn/img_convert/081b5236ebd9ff24af676bcd4a51c99e.png)

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