Снимите (или спрячьте) установите флажок Все компоненты таблицы в Quasar - PullRequest
Новая
       57

Снимите (или спрячьте) установите флажок Все компоненты таблицы в Quasar

0 голосов
/ 01 апреля 2020

Я использую квазар, и я добавил таблицу с несколькими вариантами выбора, как это изображение:

enter image description here

Проблема в том, что я не могу найти способ скрыть флажок в заголовке, который выбирает все параметры таблицы.

enter image description here

Это код, который я использую: 

<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
                }, ]

Спасибо!

1 Ответ

1 голос
/ 03 апреля 2020

Вы не можете достичь этого напрямую. Вам нужно использовать слот заголовка и оставить первый 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

...