vue b-table隐藏一列

Posted 2023-02-22

【中文标题】vue b-table隐藏一列

【英文标题】：Vue b-table hide one column

【发布时间】：2021-07-09 16:46:54

【问题描述】：

我是 vue 的新手，对于这个项目，我使用 Vue、Bootstrap-vue 来对我的数据名称列表进行分页。有没有办法可以隐藏一列 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
    
,

【参考方案1】：

您可以将fields 配置如下：

<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'],
  ...
)

来自此处的文档：https://bootstrap-vue.org/docs/components/table