Quasar 1.22表格代码批量选中所有行（含非可见行）时复选框未勾选的问题

我明白你遇到的困扰了——在Quasar 1.22的q-table中，你通过自定义方法尝试选中所有行（包括分页/过滤后的非可见行），虽然selected数组已经正确拿到了所有行的number值，但表头的全选复选框却始终处于未勾选状态，对吧？

问题根源 #

Quasar的q-table默认的全选逻辑是仅针对当前可见页的，当你手动直接赋值selected数组时，表格内部的表头复选框状态不会自动同步——它只会检查当前页的行是否全部被选中，而不会去对比总选中数和总数据量的匹配关系，所以才会出现数据已选中但复选框没勾上的情况。

解决方案一：自定义表头复选框（推荐，更优雅） #

我们可以通过自定义表头的选择列，手动控制复选框的状态，让它根据selected数组的长度和总数据量来判断是否应该勾选：

1. 修改q-table的模板，添加自定义表头选择列的slot：

<q-table
  ref="tablePartic"
  :key="tkey"
  flat
  dense
  bordered
  square
  class="q-mt-xs"
  title="Participantes"
  :data="participantes"
  :columns="columns"
  :loading="loading"
  row-key="number"
  :selected-rows-label="getSelectedString"
  selection="multiple"
  :filter="filter"
  :selected.sync="selected"
  :pagination="pagination"
>
  <!-- 自定义选择列的表头，替换默认的复选框 -->
  <template v-slot:header-selection="props">
    <q-checkbox
      :model-value="selected.length === participantes.length && participantes.length > 0"
      @input="toggleSelectAll"
    />
  </template>
</q-table>

2. 在methods中添加对应的全选/取消全选方法，同时修改你的selectAllRows方法：

methods: {
  toggleSelectAll(val) {
    if (val) {
      // 选中所有行：把所有数据的row-key（这里是number）存入selected数组
      this.selected = this.participantes.map(o => o.number);
    } else {
      // 取消全选
      this.selected = [];
    }
  },
  selectAllRows() {
    // 直接调用toggleSelectAll实现全选所有行
    this.toggleSelectAll(true);
  },
  // 你的其他方法...
  getSelectedString() {
    // 保持你原有的实现
  }
}

这样修改后，表头的复选框会根据selected数组的长度和总数据量自动同步状态，点击复选框也能一键全选/取消所有行（包括非可见行），完全符合你的需求。

解决方案二：快速修复（无需修改模板，适合临时场景） #

如果你不想改动模板，也可以通过操作DOM的方式强制同步表头复选框的状态，不过这种方法相对hack一点：

修改你的selectAllRows方法：

selectAllRows() {
  // 赋值所有行的row-key到selected数组
  this.selected = this.participantes.map(o => o.number);
  // 等待DOM更新后，手动设置表头复选框的状态
  this.$nextTick(() => {
    const headerCheckbox = this.$refs.tablePartic.$el.querySelector('.q-table__header-checkbox input');
    if (headerCheckbox) {
      // 设置复选框为选中状态
      headerCheckbox.checked = true;
      // 触发change事件，让表格内部状态同步
      headerCheckbox.dispatchEvent(new Event('change'));
    }
  });
}

这个方法的原理是在Vue更新DOM后，找到表头的复选框元素，手动修改它的选中状态并触发事件，让表格内部的状态和我们的selected数组保持一致。

备注：内容来源于stack exchange，提问作者Luiz Alves