标题中带有过滤器的 Bootstrap-vue b-table [英] Bootstrap-vue b-table with filter in header
问题描述
我有一个用 bootstrap-vue 生成的表,它显示了系统搜索的结果.
结果表向用户显示记录,用户可以对它们进行排序和过滤.
如何在使用 bootstrap-vue 当前表格的屏幕截图: 想要的桌子的模型: 您可以使用 注意:我使用了计算属性来过滤项目,而不是 I have a table generated with bootstrap-vue that shows the results of a system search. The Results Table shows the records to the user, and the user can sort them and filter them. How can I add the search field underneath the table header Screenshot of the current table:
Mockup of the wanted table:
You can use the
Note: I've used a computed property to filter the items instead of the 这篇关于标题中带有过滤器的 Bootstrap-vue b-table的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
元素生成的表头 下方添加搜索字段? top-row
槽来自定义您自己的第一行.请参阅下面的基本示例.new Vue({el: '#app',数据: {过滤器:{ID: '',由...发出: '',发给:''},项目:[{id:1234,issuedBy:'Operator',issuedTo:'abcd-efgh'},{id:5678,issuedBy:'User',issuedTo:'ijkl-mnop'}]},计算:{过滤(){const 过滤 = this.items.filter(item => {返回 Object.keys(this.filters).every(key =>字符串(项目[键]).包括(this.filters[键]))})返回filtered.length >0 ?过滤:[{ID: '',由...发出: '',发给:''}]}}})
<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">;</脚本><div id="应用程序"><b-table striped show-empty :items="filtered"><template slot="top-row" slot-scope="{ fields }"><td v-for="字段中的字段" :key="field.key"><input v-model="filters[field.key]" :placeholder="field.label"></td>模板></b-table>
b-table
中的 :filter
属性,因为它没有'如果过滤掉所有项目,包括您的自定义第一行,则不呈现行.这样我就可以在结果为空时提供一个虚拟数据行.<th>
generated with the bootstrap-vue <b-table>
element?top-row
slot to customise your own first-row. See below for a bare-bones example.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
prop in b-table
because it doesn't render rows if all the items are filtered out, including your custom first-row. This way I can provide a dummy data row if the result is empty.
登录
关闭