如何为Quasar q-table多选列设置标签而非默认复选框？

直接用Quasar q-table官方提供的header-cell-selection插槽就能实现，既能保留全选复选框的功能，又能添加自定义标签，具体修改如下：

修改后的代码 #

<q-table 
  :rows="rows" 
  :columns="columns" 
  dense 
  flat 
  row-key="id" 
  selection="multiple" 
  v-model:selected="selected" 
  hide-pagination
>
  <!-- 自定义多选列的表头 -->
  <template #header-cell-selection="props">
    <div class="text-center">
      <q-checkbox v-model="props.table.selectedAll" />
      <!-- 替换成你需要的自定义标签文本 -->
      <span class="ml-2">选择</span>
    </div>
  </template>
</q-table>

关键说明 #

• header-cell-selection是q-table专为多选列开放的表头插槽，用来覆盖默认的全选复选框表头区域
• props.table.selectedAll绑定的是q-table内置的全选状态变量，保证全选/取消全选的功能正常工作
• 你可以自由调整插槽内的HTML结构和样式，比如把标签放在复选框上方：

<template #header-cell-selection="props">
  <div class="text-center">
    <span>批量选择</span>
    <q-checkbox v-model="props.table.selectedAll" class="mt-1" />
  </div>
</template>

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