从bootstrap-vue documentation
中,我可以看到如何启用按列排序,但是否可以对整个表进行排序?
发布于 2019-01-21 17:13:53
这是不可能的,但您可以使用计算属性通过映射fields
属性并添加具有真值的可排序键来轻松处理,如下所示:
new Vue({
el: "#app",
data() {
return {
// Note 'isActive' is left out and will not appear in the rendered table
fields: [{
key: 'last_name'
},
{
key: 'first_name'
},
{
key: 'age',
label: 'Person age',
}
],
items: [{
isActive: true,
age: 40,
first_name: 'Dickerson',
last_name: 'Macdonald'
},
{
isActive: false,
age: 21,
first_name: 'Larsen',
last_name: 'Shaw'
},
{
isActive: false,
age: 89,
first_name: 'Geneva',
last_name: 'Wilson'
},
{
isActive: true,
age: 38,
first_name: 'Jami',
last_name: 'Carney'
}
]
}
},
computed: {
sortable_cols() {
return this.fields.map(f => {
let tmp = f;
tmp.sortable = true;
return tmp
})
}
}
})
<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://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Add this after vue.js -->
<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 hover :items="items" :fields="sortable_cols"></b-table>
</div>
如果您没有定义fields
属性,则可以使用以下代码:
new Vue({
el: "#app",
data() {
return {
items: [{
isActive: true,
age: 40,
first_name: 'Dickerson',
last_name: 'Macdonald'
},
{
isActive: false,
age: 21,
first_name: 'Larsen',
last_name: 'Shaw'
},
{
isActive: false,
age: 89,
first_name: 'Geneva',
last_name: 'Wilson'
},
{
isActive: true,
age: 38,
first_name: 'Jami',
last_name: 'Carney'
}
]
}
},
computed: {
sortable_cols() {
return Object.keys(this.items[0]).map(f => {
let tmp = {};
tmp.sortable = true;
tmp.key = f;
return tmp
})
}
}
})
<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://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Add this after vue.js -->
<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 hover :items="items" :fields="sortable_cols"></b-table>
</div>
https://stackoverflow.com/questions/54294716
复制