Vuejs/Buetify：使用 b-table 的可搜索道具清除搜索过滤器答案

【问题标题】：Vuejs/Buetify : clear search filter using searchable prop of b-tableVuejs/Buetify：使用 b-table 的可搜索道具清除搜索过滤器
【发布时间】：2020-08-05 15:14:36
【问题描述】：

我正在使用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
        },
        ....
      ]
    }

我希望能够清除搜索到的字段。请问有什么建议可以实现这个吗？

【问题讨论】：

标签： vue.js v-model buefy

【解决方案1】：

你的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] = ''"
>

如果可行，请告诉我。

【讨论】：