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

Question

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

我想我看到了一种通过将“Id”绑定(bind)到 row.key 或 row.index 或一些此类 b 表属性来做到这一点的方法，但我在任何地方都找不到。

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

该表如下所示:

                <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 表行数据上下文来做我想做的事情？

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' .