el-table一键选择全部行，切换分页后无法勾选

问题背景

现在有个需求，一个表格有若干条数据(假设数量大于20，每页10条，保证有2个以上分页即可)。
现在需要在表格上方加个全部选择的按钮，点击全部选择按钮时，可以把表格的复选框全部勾选，切换分页后依然是勾选状态，那么怎么实现呢？示意图如下：

尝试解决

我们平时做表格的勾选时，一般都用selection-change方法。
假设我们有个接口getAllTableIds返回数据的全部id，那么我们尝试以下方法来实现上述需求：

<el-button type="primary" plain size="mini" @click="handleSelectAll">全部选中</el-button>
<el-table
      ref="tableRef"
      :data="tableData"
      @selection-change="handleSelectionChange"
      :row-key="row => row.id"
>
      <el-table-column type="selection" reserve-selection label="序号" />
      <el-table-column label="编号" prop="code" />
</el-table>
export default {
methods: {
/** 多选框选中操作 */
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    // 全部选中
    handleSelectAll() {
      getAllTableIds().then(res => {
        this.ids = res.data
        this.setSelectedCheckbox()
      })
    },
    // 设置按勾选框选中
    setSelectedCheckbox() {
      this.$nextTick(() => {
        if (this.ids.length > 0) {
          this.tableData.forEach((item) => {
            if ( this.ids.includes(item.id) ) {
              this.$refs.tableRef.toggleRowSelection(item, true);
            }
          });
        }
      })
    },
}
}

存在问题

你这样写了之后，感觉还不错，点击全部选中按钮，也确实全都勾选了，就像上图一样，但是当你切换到第二页时，你就傻眼了，咋没勾选上呢？

问题分析

上面我们的思路主要分为以下几个步骤：

• 点击按钮，从接口处获取全部id列表，并保存到ids数组变量
• 遍历当前页的数据，如果ids中存在该id，那么就把当前行设置为勾选状态
• 切换分页时也调用setSelectedCheckbox方法
• 傻眼了
  其实，逻辑都没有错，错的是没用对方法，就是上面提到的selection-change方法，如果你对该方法的函数handleSelectionChange打印一下，你会发现该方法执行了10次(因为每页10条数据)
  因为你在循环中执行勾选：

  this.$refs.tableRef.toggleRowSelection(item, true);
  

  就不断地触发handleSelectionChange方法，这也导致上面给ids赋值全部id的集合，也会变为当前页的集合，也就导致当你切换分页时，第二页不会勾选的原因。
  

解决方案

el-table文档中还有这两种方法

既然循环勾选的时候会触发selection-change的方法，那么我们不用这个方法不就好了吗。
监听表格变化，可以用select和select-all两种方法的结合；因为勾选状态无非就是勾选单行和勾选当前页两种嘛！

改进思路如下

• 点击按钮，从接口处获取全部id列表，并保存到ids数组变量
• 遍历当前页的数据，如果ids中存在该id，那么就把当前行设置为勾选状态
• 切换分页时也调用setSelectedCheckbox方法
• 单行勾选变化
  • 选中：把该行id值push进ids数组，并去重(防止以外情况)
  • 取消勾选：把该行id值从ids数组中去除
• 当前页勾选变化
  • 选中：把当前页的id值push进ids数组，并去重(防止以外情况)
  • 取消勾选：把当前页的id值从ids数组中去除

这样就不会影响ids的值了!

具体代码实现如下

<el-button type="primary" plain size="mini" @click="handleSelectAll">全部选中</el-button>
<el-table
      ref="tableRef"
      :data="tableData"
      @select="handleSelectRow"
      @select-all="handleSelectAllRow"
      :row-key="row => row.id"
>
      <el-table-column type="selection" reserve-selection label="序号" />
      <el-table-column label="编号" prop="code" />
</el-table>
export default {
methods: {
/** 多选框选中操作 */
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    
    // 选择某行
    handleSelectRow(selection, row) {
      const id = row.id
      if(this.ids.includes(id)) {
        this.ids = this.ids.filter(item => item !== id)
      } else {
        this.ids.push(id)
      }
    },

    // 选择当前页
    handleSelectAllRow(selection) {
      // 如果全部勾选
      if(selection.length > 0) {
        const ids = selection.map((item) => item.id);
        this.ids = Array.from(new Set([...this.ids,...ids]))
      } else {
        // 如果当前页取消勾选
        const ids = this.tableData.map((item) => item.id);
        this.ids = this.ids.filter(item => !ids.includes(item))
      }
    },
    
    // 设置按勾选框选中
    setSelectedCheckbox() {
      this.$nextTick(() => {
        if (this.ids.length > 0) {
          this.tableData.forEach((item) => {
            if ( this.ids.includes(item.id) ) {
              this.$refs.tableRef.toggleRowSelection(item, true);
            }
          });
        }
      })
    },
}
}

这样就能解决一键全选、且分页保留勾选状态的功能了！

别忘了，请求列表接口时也调用setSelectedCheckbox方法

如果有更好的解决办法，可在评论区讨论，谢谢。

原文地址：https://blog.csdn.net/yan1915766026/article/details/144293953

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