删除（或隐藏）Quasar 中的 select 所有复选框 Table 组件

Question

我正在使用类星体，我添加了一个 table 具有多个选择，如下图：

问题是我找不到隐藏 header 中选择 table 所有选项的复选框的方法。

这是我使用的代码：

<q-table flat title="Please select ETF to compare" :data="etf_comp" :columns="columns_compare_etf" row-key="name" :selected-rows-label="getSelectedString" selection="multiple" :filter="filter" :selected.sync="selected_comparing_etf">

                                    <template v-slot:top>
                                        <q-btn color="primary" :label="menu_option_selected" class="q-my-lg">
                                            <q-menu>
                                                <q-list style="min-width: 100px">
                                                    <q-item clickable v-close-popup v-for="option in menu_option_list" :key="option.name" @click="comparingChangeLabel(option.name,option.value)">
                                                        <q-item-section>${option.name}</q-item-section>
                                                    </q-item>
                                                </q-list>
                                            </q-menu>
                                        </q-btn>
                                        <q-space></q-space>
                                        <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
                                            <template v-slot:append>
                                              <q-icon name="search" />
                                            </template>
                                    </q-input>
                                    </template>

                                </q-table>

列：

columns_compare_etf: [{
                    name: 'ticker',
                    align: 'left',
                    label: 'Ticker',
                    field: 'ticker',
                    sortable: true
                }, {
                    name: 'name',
                    align: 'left',
                    label: 'Name',
                    field: 'name',
                    sortable: true
                }, ]

谢谢！

Answer 1

你不能直接实现这个。您需要使用 header 插槽并将第一个 q-th 保留为黑色。

  <template v-slot:header="props">
    <q-tr :props="props">
      <q-th></q-th>
      <q-th
        v-for="col in props.cols"
        :key="col.name"
        :props="props"
        class="text-italic text-purple"
      >
        {{ col.label }}
      </q-th>
    </q-tr>
  </template>

codepen - https://codepen.io/Pratik__007/pen/eYNaddb?editors=1010

删除（或隐藏）Quasar 中的 select 所有复选框 Table 组件

Remove (or hide) select all check box Table component in Quasar

vue.js

quasar-framework

quasar