时间戳

首页 > 解决方案 > Bootstrap-vue b-table，标题中带有过滤器

vue.js - Bootstrap-vue b-table，标题中带有过滤器

问题描述

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

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

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

当前表格截图： 在此处输入图像描述

通缉表样机： 通缉表的样机

标签： vue.jshtml-tablebootstrap-4bootstrap-vue

解决方案

您可以使用该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>

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

推荐阅读