使 bootstrap-vue b-table 'Id' 列不可见

Question

我在数据中有一个 bootstrap-vue table (b-table)，我想为其创建一个事件可访问的 'Id' 值稍后但我想从 table 渲染中隐藏它。

我以为我看到了一种通过将 'Id' 绑定到 row.key 或 row.index 或某些此类 b-table 属性来实现此目的的方法，但我找不到任何地方。

所以我在字段定义中包含了列值，但是我找不到隐藏该列的方法。

table 看起来像这样：

                <b-table show-empty responsive striped hover small outlined :stacked="stack"
                     :items="DisplayViewData"
                     :fields="fields"
                     :sort-by.sync="sortBy"
                     :sort-desc.sync="sortDesc">
                <template slot="select" slot-scope="data">
                    <b-form-checkbox v-model="data.item.IsSelected"/>
                </template>
            </b-table>

字段定义如下：

       fields: Array<any> = [
        {key: 'Id',},
        {key: 'LastName', sortable: true},
        {key: 'FirstName', sortable: true},
        etc.....
    ];

但这意味着 Id 列已呈现。

有没有办法通过使 'Id' 列不可见或将 data.Id 值分配给其他一些 b-table 行数据上下文来实现我想要的？

Answer 1

我的快速解决方案是这样的：

fields: Array<any> = [
        {key: 'Id', thClass: 'd-none', tdClass: 'd-none' },
        {key: 'LastName', sortable: true},
        {key: 'FirstName', sortable: true},
        etc.....
    ];

所以对于 Id 使用 thClass: 'd-none', tdClass: 'd-none'.

Answer 2

这与 Latovic 的回答类似，但使用 .d-none

fields: Array<any> = [
    {key: 'Id', thClass: 'd-none', tdClass: 'd-none' },
    {key: 'LastName', sortable: true},
    {key: 'FirstName', sortable: true},
    etc.....
];

您想使用 .d-none 的原因是因为它已经内置于 Bootstrap 4.

参见：https://getbootstrap.com/docs/4.1/utilities/display/

Answer 3

您需要做的就是不在fields定义中包含它。项目行数据仍将存在，并可通过其他字段的作用域插槽访问。

无需使用CSS类隐藏列。

通过另一个字段作用域插槽（比如 LastName 插槽）访问值：

<b-table :fields-"fields" :items="items" ... >
  <template slot="LastName" slot-scope="{ value, item }">
    <!-- value is the field value -->
    {{ value }}
    <!-- item is the entire row object -->
    <!--you can use it for actions on buttons, etc -->
    <b-button @click="doSomthing(item.Id)">{{ item.Id }}</b-button>
  </template>
</b-table>

使 bootstrap-vue b-table 'Id' 列不可见

Make bootstrap-vue b-table 'Id' column invisible

twitter-bootstrap

vuejs2

bootstrap-4

bootstrap-vue