我用bootstrap vue生成了一个表,显示了系统搜索的结果.
结果表向用户显示记录,用户可以对其进行排序和筛选.
如何在bootstrap vue <b-table>
元素生成的表头<th>
下方添加搜索字段?
current table的屏幕截图:
wanted table的模型:
我用bootstrap vue生成了一个表,显示了系统搜索的结果.
结果表向用户显示记录,用户可以对其进行排序和筛选.
如何在bootstrap vue <b-table>
元素生成的表头<th>
下方添加搜索字段?
current table的屏幕截图:
wanted table的模型:
您可以使用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>
Note:我使用了computed属性来过滤项目,而不是b-table
中的:filter
props ,因为如果过滤掉所有项目(包括自定义的第一行),它不会渲染行.这样,如果结果为空,我可以提供一个虚拟数据行.