Question

我正在使用vue-bootstrap https://bootstrap-vue.js.org/docs/components/table/，并且已经为标头实现了一个插槽，因此我可以在每个包含搜索框的列标头中使用显示和隐藏按钮。标头在插槽中。在字段数据中，我添加了一个布尔值的showFilter属性。因此，想法是在真与假之间切换。现在，当在子级中将数据更改发送给它更新的父级时，所有这些都起作用。但是，表本身不会更新，除非您触发其他操作（如尝试对标题进行排序），然后它才会更新。我已经尝试过强制刷新上面url中提到的表数据，但这似乎不起作用，或者因为没有示例，所以我不知道如何使用它。

父母

<template>
<b-table
      ref="table"
      :items="filtered"
      :fields="fields"
      sort-icon-left
      responsive="sm"
    >
      <template v-slot:head()="data">
        <TableHeader :data="data" :filters="filters" />
      </template>
    </b-table>
</template>

data() {
  return {
      fields: [
        {
          key: "name",
          sortable: true,
          showFilters: true,
        },
        { key: "age", sortable: true, showFilters: true },
      ],
    }
}

孩子

<template>
  <div>
    <div class="text-info">{{ data.label.toUpperCase() }}</div>
    <div>
      <button @click="setUpdate(data.field)">filters</button>
    </div>
    <input
      v-show="data.field.showFilters"
      v-model="filters[data.field.key]"
      :placeholder="data.label"
      @keyup="$emit('update:filters[data.field.key]')"
    />
  </div>
</template>

  methods: {
    setUpdate(field) {
      this._originalField = Object.assign({}, field);
      field.showFilters = !field.showFilters;
      this.$root.$emit("update:field.showFilters", "bv::refresh::table");
      console.log(field.showFilters);
    }
  }

Answer 1

我通过使用bootstrap折叠按钮并在孩子中处理所有问题解决了这个问题，我认为这更有意义！

   <b-collapse :id="'collapse' + data.field.key">
      <b-card>
        <!-- content -->
      </b-card>
    </b-collapse>

从子级向父级发射数据时，无法刷新vue引导表

1 个答案: