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

Posted

技术标签:

【中文标题】使 bootstrap-vue b-table \'Id\' 列不可见【英文标题】:Make bootstrap-vue b-table 'Id' column invisible使 bootstrap-vue b-table 'Id' 列不可见 【发布时间】:2019-01-03 14:48:50 【问题描述】:

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

我想我看到了一种方法,通过将“Id”绑定到 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 表行数据上下文来执行我想要的操作?

【问题讨论】:

【参考方案1】:

您需要做的就是不将它包含在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>

【讨论】:

【参考方案2】:

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

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'

【讨论】:

根据@James A Mohler 的建议编辑了答案,使用 d-none 肯定要好得多,但想法还是一样的。【参考方案3】:

这类似于拉托维奇的回答,但使用.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/

【讨论】:

以上是关于使 bootstrap-vue b-table 'Id' 列不可见的主要内容,如果未能解决你的问题,请参考以下文章

b-table 中的复选框的 bootstrap-vue 问题

Bootstrap-vue b-table:如何为非活动行设置 css-Class?

Bootstrap-Vue:将角色权限实现为多个 b-form-checkbox 数组,在 b-table 中显示为列。不工作

仅在应用过滤器时显示 bootstrap-vue b-table 中的项目

如何使表头不可滚动引导 vue

bootstrap-vue table td 元素样式