我对 vue 非常陌生,对于这个项目,我使用 Vue、Bootstrap-vue 来对我的数据 nameList 进行分页。有没有办法可以隐藏一列nameList.id
并仅显示first_name和last_name。
JsFiddle 上的代码 = https://jsfiddle.net/ujjumaki/onqw5dkz/3/
查看
<div class="overflow-auto">
<b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table id="my-table" :items="nameList" :per-page="perPage" :current-page="currentPage" medium selectable>
</b-table>
</div>
JavaScript
data(){
return{
nameList: [
{ id: 1, first_name: 'The Great', last_name: 'Gazzoo' },
{ id: 2, first_name: 'Rockhead', last_name: 'Slate' },
{ id: 3, first_name: 'Pearl', last_name: 'Slaghoople' },
{ id: 4, first_name: 'Jasmine', last_name: 'Rit' }
],
perPage: 2,
currentPage: 1
}
},
计算
computed: {
rows() {
return this.nameList.length
}
},
最佳答案
您可以按如下方式配置字段
:
<b-table :items="items" :fields="fields"></b-table>
<script>
export default {
data() {
return {
fields: ['first_name', 'last_name'],
}
}
}
</script>
或者,因为您没有使用 SFC files
new Vue({
el: "#app",
...
fields: ['first_name', 'last_name'],
...
})
关于twitter-bootstrap - vue b-table隐藏一列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67095060/