Quasar框架QTable中勾选单个QCheckbox出现全选问题如何解决？

问题原因及修复方案 #

1. 错误的属性透传写法 #

你自定义body插槽时给<q-tr>、<q-td>绑定属性的方式错误，应该用v-bind="props"透传所有属性，而不是:props="props"。后者只是给组件传了一个名为props的自定义属性，没有把Quasar内部需要的行选择、行标识等属性正确透传，导致所有行的选择状态共享，出现选一个全选的问题。

2. 确认row-key对应字段值全局唯一 #

你给q-table设置了row-key="name"，必须保证curData数组中每一项的name字段值是唯一不重复的。如果有重复的name值，Quasar会把这些行识别为同一条数据，选中其中一个就会同步选中所有重复name的行。如果你的数据里name字段有重复，可以换成其他唯一字段比如id作为row-key的值。

3. 冗余属性删除 #

<q-td>上的row-key="name"属性是无效的，row-key仅需要在q-table上声明即可，可以直接删掉这行冗余配置。

修复后核心代码参考 #

<q-table
  id="selection-table"
  :title="undefined"
  :data="curData"
  :columns="columns"
  @request="updateTableData"
  :rows-per-page-options="[10, 20, 30, 40, 50]"
  :pagination.sync="pagination"
  :loading="isLoading"
  row-key="name" <!-- 确保curData的name字段唯一，否则替换为其他唯一字段 -->
  class="no-shadow q-pa-none"
  selection="multiple"
  :selected.sync="selected"
  :selected-rows-label="getSelectedString"
>
  <template v-slot:body="props">
    <q-tr v-bind="props" class="q-pa-none"> <!-- 修改为v-bind透传 -->
      <q-td>
        <q-checkbox v-model="props.selected" />
        {{ props }}
      </q-td>
      <q-td
        v-for="col in props.cols"
        :key="col.name"
        v-bind="props" <!-- 修改为v-bind透传 -->
        class="q-pa-none"
        :auto-width="col.name == 'title' ? false : true"
      >
        <span v-if="col.name === 'title'">
          {{ props.row.title }}
        </span>
        <span v-else-if="col.name === 'status'">
          <span v-if="col.value === 0">... </span>
          <span
            v-else-if="
              col.value === 200 && props.goodsStatusCode === 11
            "
            >...</span
          >
          <span v-else>
            <span class="text-red">...)</span>
          </span>
        </span>
        <span v-else> {{ col.value }} </span>
      </q-td>
    </q-tr>
  </template>
</q-table>

内容的提问来源于stack exchange，提问作者Uhney