Bootstrap-vue b-table，标题中带有过滤器答案

【问题标题】：Bootstrap-vue b-table with filter in headerBootstrap-vue b-table，标题中带有过滤器
【发布时间】：2019-03-28 06:58:22
【问题描述】：

我有一个使用 bootstrap-vue 生成的表，其中显示了系统搜索的结果。

结果表向用户显示记录，用户可以对其进行排序和过滤。

如何在使用 bootstrap-vue <b-table> 元素生成的表头 <th> 下方添加搜索字段？

当前表格的屏幕截图：

想要的桌子的模型：

【问题讨论】：

标签： vue.js html-table bootstrap-4 bootstrap-vue

【解决方案1】：

您可以使用top-row 插槽来自定义您自己的第一行。请参阅下面的简单示例。

new Vue({
  el: '#app',
  data: {
    filters: {
      id: '',
      issuedBy: '',
      issuedTo: ''
    },
    items: [{id:1234,issuedBy:'Operator',issuedTo:'abcd-efgh'},{id:5678,issuedBy:'User',issuedTo:'ijkl-mnop'}]
  },
  computed: {
    filtered () {
      const filtered = this.items.filter(item => {
        return Object.keys(this.filters).every(key =>
            String(item[key]).includes(this.filters[key]))
      })
      return filtered.length > 0 ? filtered : [{
        id: '',
        issuedBy: '',
        issuedTo: ''
      }]
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/><script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script><script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script><script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
<b-table striped show-empty :items="filtered">
  <template slot="top-row" slot-scope="{ fields }">
    <td v-for="field in fields" :key="field.key">
      <input v-model="filters[field.key]" :placeholder="field.label">
    </td>
  </template>
</b-table>
</div>

注意：我使用计算属性来过滤项目，而不是 b-table 中的 :filter 属性，因为如果过滤掉所有项目，它不会呈现行，包括您的自定义第一行。这样，如果结果为空，我可以提供一个虚拟数据行。

【讨论】：

非常感谢。它完美地工作。唯一的缺点是它弄乱了我的桌子。我的桌子完全调整了大小。为了解决这个问题，我在输入中添加了 class="col-sm"
当我复制相同的代码时，它给了我模板根不允许'v-for'指令。我无法解决问题。我是 vue 的新手。请帮助我@Phil
@Palistha 听起来你在模板根元素上有一个v-for。如果没有看到您的代码，我真的无能为力，但这并没有出现在我的答案中
@Palistha 你最好发布一个新问题
@Phil 有没有办法使用在运行时创建的动态生成的filters 对象来做到这一点？我尝试在数据部分将filters 设置为{}，然后在mounted() 中迭代items 数组中的第一个对象。过滤器对象设置正确，但是当我在输入中输入内容时，filtered() 永远不会运行。

【解决方案2】：

赞成 phil 的回答，只是让它更通用

filtered() {
      const filtered = this.items.filter(item => {
        return Object.keys(this.filters).every(key =>
          String(item[key]).includes(this.filters[key])
        );
      });
      return filtered.length > 0
        ? filtered
        : [
            Object.keys(this.items[0]).reduce(function(obj, value) {
              obj[value] = '';
              return obj;
            }, {})
          ];
    }

【讨论】：

【解决方案3】：

感谢您提供这些有用的答案。它节省了我今天的一些时间。但是，如果项目是异步给出的，我必须像这样添加对项目大小的测试

filtered() {
                if (this.items.length > 0) {
                    const filtered = this.items.filter(item => {
                        return Object.keys(this.filters).every(key => String(item[key]).includes(this.filters[key])
                        );
                    });
                    return filtered.length > 0
                        ? filtered
                        : [
                            Object.keys(this.items[0]).reduce(function (obj, value) {
                                obj[value] = '';
                                return obj;
                            }, {})
                        ];
                }
            },

另一方面，如果需要有没有过滤器的列，我在下面添加了这个测试

在模板中

      <td v-for="field in fields" :key="field.key">
          <input v-if="fieldIsFiltered(field)" v-model="filters[field.key]" :placeholder="field.label">
        </td>

在组件方法中

fieldIsFiltered(field)  {
                return Object.keys(this.filters).includes(field.key)
            }

【讨论】：

【解决方案4】：

错误

      const filtered = this.items.filter(item => {
        return Object.keys(this.filters).every(key =>
            // String(item[key]).includes(this.filters[key]))
            return String(item[key]).includes(this.filters[key]))
      })

【讨论】：