Vuejs / Buetify: очистить фильтр поиска с использованием возможности поиска b-таблицы - PullRequest
Новая
       57

Vuejs / Buetify: очистить фильтр поиска с использованием возможности поиска b-таблицы

0 голосов
/ 05 августа 2020

Я использую buefy для создания таблицы с входными фильтрами в столбцах. Вот как это выглядит: 

<b-table
        :data="cars"
        :sticky-header="true"
        :selected.sync="selected"
        >
          <template slot-scope="props">
            <template v-for="column in columns">
              <b-table-column :key="column.id" v-bind="column">
                <template
                  v-if="column.searchable"
                  slot="searchable"
                  slot-scope="props"
                >
                  <b-input
                    v-model="props.filters[props.column.field]"
                    placeholder="Search..."
                    icon="magnify"
                    size="is-small"
                  />
                </template>
                {{ props.row[column.field] }}
              </b-table-column>
            </template>
          </template>
        </b-table>
...
...
data () {
    return {
      selected: null,
      columns: [
        {
          field: 'constructor',
          label: 'Constructor',
          searchable: true
        },
        ....
      ]
    }

Я хотел бы иметь возможность очистить поля поиска. Есть какие-нибудь предложения по достижению этого, пожалуйста?

1 Ответ

0 голосов
/ 05 августа 2020

Ваш b-input привязан к props.filters[props.column.field], поэтому это означает, что вы должны иметь возможность сбросить это значение с помощью значка: 

<b-input
  v-model="props.filters[props.column.field]"
  ...
  icon-right="close-circle"
  icon-right-clickable
  @icon-right-click="props.filters[props.column.field] = ''"
>

Пожалуйста, дайте мне знать, если это сработает.

...